What's the Difference Between these CSS Selectors?

**etidd** · May 27, 2011 20:55

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

Code:

ul.pMenu ul li ul li ul

different from:

Code:

ul.pMenu ul ul ul

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

Code:

ul.pMenu ul ul ul > li

**ralph.m** · May 27, 2011 21:26

Originally Posted by etidd

Is the following

Code:

ul.pMenu ul li ul li ul

different from:

Code:

ul.pMenu ul ul ul

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,

Code:

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:

Code:

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:

Code:

ul.pMenu > li {color: red}

If that were applied to a structure like

Code:

<ul class=pMenu">
  <li>
    <ul>
      <li>
      </li>
    </ul>
  </li>
</ul>

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

Code:

ul.pMenu li {color: red}

all of the LIs would be red:

Code:

<ul class=pMenu">
  <li>
    <ul>
      <li>
      </li>
    </ul>
  </li>
</ul>

**etidd** · May 27, 2011 22:31

Your Reply is...
AMaZiNg!!

**ralph.m** · May 27, 2011 22:38

Originally Posted by etidd

Your Reply is...
AMaZiNg!!

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)

**dresden_phoenix** · May 27, 2011 22:40

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)...

**ralph.m** · May 27, 2011 23:43

Originally Posted by dresden_phoenix

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

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.

Code:

<!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>

**dresden_phoenix** · May 27, 2011 23:45

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.

User Tag List

Thread: What's the Difference Between these CSS Selectors?

Thread Tools

Display

What's the Difference Between these CSS Selectors?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions