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