html - floating part of a ul -


i have basic question.

i have page ul 7 lis, spanning 100% of page. want make last 3 lis float right, , want last 1 different color. trying not recode more necessary.

here code, how shall apply css? make ul, (but stay in line other) or apply li directly? can make special class of li let last 3 positioned in different place?

<html>   <head>     <style>       ul {         width:100%;         padding:0;         margin:0;         list-style-type:none;       }       {         width:6em;         text-decoration:none;         color:white;       }      </style>   </head>    <body>     <ul>       <li><a href="#">link one</a></li>       <li><a href="#">link two</a></li>       <li><a href="#">link three</a></li>       <li><a href="#">link four</a></li>       <li><a href="#">link five</a></li>       <li><a href="#">link six</a></li>       <li><a href="#">link seven</a></li>     </ul>   </body> </html> 

you use :nth-child() this. css-tricks.com/how-nth-child-works

li:nth-child(5), li:nth-child(6), li:nth-child(7) {     text-align: right; }  li:nth-child(7) {     color: red; } 

example: http://jsfiddle.net/skeurentjes/3rr8d/


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -