Question about > usage in CSS

**StevenHu** · Aug 7, 2012 13:06

.block-grid > li { display: block; height: auto; float: left; }

Can you explain what the ">" is doing in the CSS above?

**Stevie D** · Aug 7, 2012 13:35

Originally Posted by StevenHu

.block-grid > li { display: block; height: auto; float: left; }

Can you explain what the ">" is doing in the CSS above?

In CSS terms, > means "direct child of".

If you just had .block-grid li {...} then any <li> that was a descendant of any element with class="block-grid" would take those styles, eg

HTML Code:

<ul class="block-grid">
<li>This first one</li>
<li>This second one</li>
<ul><li>and this one</li>
    <li>and this one
    <ul><li>and this one</li></ul>
</li></ul></li></ul>

So how do you target only the first and second one? You quite possibly don't want the same styles applied to the sub-list and sub-sub-list. That's where the > selector comes in. Because any of the <li>s that start say "and this one" are not direct children of <li class="block-grid">, they're grandchildren or great-grandchildren. So by using the direct child selector, you ensure that you don't hit other elements nested inside.

**StevenHu** · Aug 7, 2012 13:39

Very clear explanation. Thank you!

**StevenHu** · Aug 7, 2012 14:09

I tested this:

Code:

ul>li { text-decoration: blink; }

on

Code:

<ul>
  <li>testing ul>li text-decoration (chosen)</li>
  <li>
    <ol>
      <li>testing ul>li text-decoration (not chosen)</li>
      <li>testing ul>li text-decoration (not chosen)</li>
    </ol>
  </li>
</ul>

and ALL of the li elements blink! That can't be right.

**Stevie D** · Aug 7, 2012 14:32

Originally Posted by StevenHu

I tested this:

Code:

ul>li { text-decoration: blink; }

on

Code:

<ul>
  <li>testing ul>li text-decoration (chosen)</li>
  <li>
    <ol>
      <li>testing ul>li text-decoration (not chosen)</li>
      <li>testing ul>li text-decoration (not chosen)</li>
    </ol>
  </li>
</ul>

and ALL of the li elements blink! That can't be right.

The problem there is that some properties are inherited by their children. A lot of formatting is like that. If you have

HTML Code:

<div class="color:red;">
<p>Some text here</p>
</div>

the text in the <p> will be red (unless it's overridden by CSS unseen), even though there is nothing in the CSS that says paragraphs have red text.

A better way to demonstrate it would be to use font-size:2em;. If you include the > you should see that all the list items are double the size of regular text. But if you leave the > out, the 'not chosen' items will be quadruple the size of normal text (because they are doubled and doubled again as they are contained within two <li>s).

**StevenHu** · Aug 7, 2012 14:54

Then I'm not sure exactly when > will apply in CSS. How do I use it and it NOT affect the other li's?

**Stevie D** · Aug 7, 2012 15:33

Originally Posted by StevenHu

Then I'm not sure exactly when > will apply in CSS. How do I use it and it NOT affect the other li's?

That depends on what properties you want to apply. You can override them with eg

Code css:

ul ul {text-decoration:none;}

**StevenHu** · Aug 7, 2012 15:47

So the example given of using ul>li { text-decoration: blink; } to modify

Code:

<ul>
  <li>testing ul>li text-decoration (chosen)</li>
  <li>
    <ol>
      <li>testing ul>li text-decoration (not chosen)</li>
      <li>testing ul>li text-decoration (not chosen)</li>
    </ol>
  </li>
</ul>

was a poor example of the usage of >. So exactly how would > be used to make a specific line in a code example of your choosing be styled text-decoration:line-through? I'd still like to see a full example. I am just going deeper into CSS theory and testing them for myself to gain more understanding and appreciation.

**markbrown4** · Aug 7, 2012 16:52

Here's another example.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
li > ul { display: none }
li:hover > ul { display: block }
</style>
<body>
<ul>
  <li><a href="home.html">Main</a>
    <ul>
      <li><a href="home.html">Sub1</a>
        <ul>
          <li><a href="home.html">Sub2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</body>
</html>

Like Steve said, text properties like font-size / color are always inherited by their children elements so you can't ever apply those styles to one element and not have their children inherit them. You need to override the children styles if you want them to be different.

**StevenHu** · Aug 8, 2012 07:30

Mark,

That was a helpful example. Thank you! So this tag just doesn't work well in isolation. I get it now.

User Tag List

Thread: Question about > usage in CSS

Thread Tools

Display

Question about > usage in CSS

Bookmarks

Bookmarks

Posting Permissions