Jump to content



Photo

Selecting the first level only in CSS?


  • Please log in to reply
3 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 22 February 2013 - 19:16

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>



#2 LaP

LaP

    Forget about it

  • Tech Issues Solved: 4
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 22 February 2013 - 19:25

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>


#3 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 22 February 2013 - 19:35

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

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:

ul li ul li{style: something}


#4 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 22 February 2013 - 22:10

don't need the > before :first-child



Click here to login or here to register to remove this ad, it's free!