What's the Difference Between these CSS Selectors?

HTML & CSS
1

I am hoping to complete my home page menu soon, and I just wanted to know what the differences are between these css selectors…

Is the following


ul.pMenu ul li ul li ul

different from:


ul.pMenu ul ul ul

How does using the > symbol make CSS selections different? For example,


ul.pMenu ul ul ul > li
2

Yes, those are the same, assuming that each sub UL is nested inside a LI, as it should be.

How does using the > symbol make CSS selections different? For example,


ul.pMenu ul ul ul > li

The > symbol means that the rule is only applied to a LI that is the direct child of the last UL. So that rule would be the same as this:


ul.pMenu ul ul ul li

So you use > if you only want the rule to apply to the direct child of the UL, and not any LIs that might be further nested below.

Another example might be:

ul.pMenu > li {color: red}

If that were applied to a structure like

<ul class=pMenu">
  [COLOR="red"]<li>[/COLOR]
    <ul>
      <li>
      </li>
    </ul>
  </li>
</ul>

only the top-level LI would be red, whereas with this rule

ul.pMenu li {color: red}

all of the LIs would be red:

<ul class=pMenu">
  [COLOR="red"]<li>[/COLOR]
    <ul>
      [COLOR="Red"]<li>[/COLOR]
      </li>
    </ul>
  </li>
</ul>
3

Your Reply is…
AMaZiNg!!

4

Great! You can learn more about it here, if you like, and can hit the Play tab to do some experiments:

Child Selector (CSS selector)

5

there is ONE IMPORTANT DIFFERENCE between ul.pMenu ul li ul li ul and ul.pMenu ul ul ul, and that is that the latter is MORE specific…

if you had :
ul.pMenu ul li ul li ul{ color: red;}
ul.pMenu ul ul ul{ color: green;}

your LIs would be green ( this even if ul.pMenu ul ul ul{ color: green;} is placed latter in the code, which is sometimes useful… tho probably not in this particular example.

the child selector is also useful… but it’s important to note that older versions of IE did not understand it. so sometimes you wee it used as a hack to WEED OUT old IE.

for example
body p{color:green;}
body>p {color: red }
the text will be green only in (IE6)…

6

No, they’d be red, as ul li ul li ul is more specific than ul ul ul (it’s basically 5 selectors to three).

E.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
ul.pMenu ul li ul li ul{ color: red;}
ul.pMenu ul ul ul{ color: green;}
</style>

</head>
<body>
<ul class="pMenu">
  <li>test
    <ul>
      <li>test    
        <ul>
          <li>test    
            <ul>
              <li>test</li>
              <li>test</li>
              <li>test</li>
            </ul>
          </li>
          <li>test</li>
          <li>test</li>
        </ul>
      </li>
      <li>test</li>
      <li>test</li>
    </ul>
  </li>
  <li>test
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </li>
  <li>test</li>
</ul>

</body>
</html>
7

oops, my bad. I meant ul.pMenu ul li ul li ul{ color: red;} is more specific… I need coffee… thanks for catching that I didnt want to confuse anyone.