• 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]

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]

  • 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]

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

    • No registered users viewing this page.
  • Posts

  • Recent Achievements

    • First Post
      Gladiattore earned a badge
      First Post
    • Reacting Well
      Gladiattore earned a badge
      Reacting Well
    • Week One Done
      NeoWeen earned a badge
      Week One Done
    • One Month Later
      BA the Curmudgeon earned a badge
      One Month Later
    • First Post
      Doreen768 earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      649
    2. 2
      ATLien_0
      256
    3. 3
      Xenon
      166
    4. 4
      neufuse
      143
    5. 5
      +FloatingFatMan
      107
  • Tell a friend

    Love Neowin? Tell a friend!