Question about > usage in CSS

HTML & CSS
1

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

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

2

[font=verdana]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

<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.[/font]

3

Very clear explanation. Thank you!

4

I tested this:

ul>li { text-decoration: blink; }

on

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

5

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

<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).[/font]

6

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

7

[font=verdana]That depends on what properties you want to apply. You can override them with eg

ul ul {text-decoration:none;}

[/font]

8

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

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

9

Here’s another example.


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

10

Mark,

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