css - Pseudo-classes for li list -
css - Pseudo-classes for li list -
i'm experimenting here pseudo-classes , trying style class. have unordered list multiple sub unordered lists , on.
i want create sure first level of li tags been set float left. here html
<body> <div id="mainmenu"> <ul id="nav"> <li><a href="#">home</a></li> <li> <a href="#">about</a> <ul> <li><a href="#">the product</a></li> <li><a href="#">meet team</a></li> </ul> </li> <li> <a href="#">contact</a> <ul> <li> <a href="#">business hours</a> <ul> <li><a href="#">week days</a></li> <li><a href="#">weekends</a></li> </ul> </li> <li><a href="#">directions</a></li> </ul> </li> </ul> </div> </body>
i tried style this.
body { font: 13px/160% trebuchet ms,arial,helvetica,sans-serif; margin:0; padding:0 } #nav{ list-style:none; font-weight:bold; width:100%; } #nav li{ float:left; margin-right:40px; position:relative; }
the issue is, saying li descendants of id nav set float left. want first level li tags float left , other level li tags ignored. please don't reply saying utilize class name top level li tags. aware approach this. i'm after larn of pseudo-classes , how may help me in approach.
for illustration need #nav li:first-child{ .... } going give me first li in top ul list. want top level children of ul list , ignore sec level li tags , on. there pseudo-classes can accomplish this.
thanks
you can utilize #nav > li
matches elements immediate li
children of #nav
.
more info here , here.
a demo: http://jsfiddle.net/9m6p2/
css css-selectors
Comments
Post a Comment