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
Post a Comment