css - first parent ul and first li doesn't work properly -


i have issue when selecting first ul , first li affects first li of second ul>li too.

my attempt:

#main-nav ul:first-child li:first-child{     border-radius:5px 0px 5px 0px; } 

the corresponding html:

<nav id="main-nav">     <ul>      <li><a href="#">home</a></li>      <li><a href="#">blog</a></li>          <li><a href="#">photos</a>            <ul>              <li><a href="#">gallery 1</a></li>              <li><a href="#">gallery 2</a></li>            </ul>          </li>      <li><a href="#">about</a></li>      <li><a href="#">contacts</a></li>     </ul>   <div style="clear:both;"></div> </nav> 

i think after is:

#main-nav ul:first-child > li:first-child {    border-radius:5px 0px 5px 0px; } 

this select first li of first ul > selects child elements of element preceding it.

as paulie_d suggests, #main-nav > ul > li:first-child bit more concise , work long there 1 child ul in #main-nav.


Comments

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

javascript - Highcharts multi-color line -

javascript - Enter key does not work in search box -