• 0

Selecting the first level only in CSS?


Question

I'm trying to understand what '>' does more and want to select the first level in my ul list. Can you tell me what do use. I coded out the html and would like to know how to select the first level and then second level only. Thanks




<ul id="blogPost">

<li><!-- First Level -->
<a href="#">
<ul>
<li><!-- Second Level -->

</li>
</ul>
</a>
</li>

<li><!-- First Level -->
<a href="#">
<ul>
<li><!-- Second Level -->

</li>
</ul>
</a>
</li>

<li><!-- First Level -->
<a href="#">
<ul>
<li><!-- Second Level -->

</li>
</ul>
</a>
</li>

</ul>
[/CODE]

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

ul > li

does select the li that are child of the ul.

ul li

does select the li that are descendant of the ul.


<ul id="premier">
<li>child of ul premier</li>
<li>
child of ul premier

<ul id="deuxieme">
<li>descandant of ul premier and child of ul deuxieme</li>
</ul>
</li>
</ul>
[/CODE]

Link to comment
Share on other sites

  • 0


ul#blogPost > li a{color: red;}
ul>:first-child{color: green;}
[/CODE]

That will style all the top level lis red, and the first of all the child elements green. If you want all of the lis of the child uls green, just specify to that level, i.e:

[CODE]
ul li ul li{style: something}
[/CODE]

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.