Odd or Even Rows
li:nth-child(odd) { color: blue; margin-left: 15px; }
li:nth-child(even) { color: green; margin-left: 15px; }
Every 3rd Row
li:nth-child(3n) { color: orange; margin-left: 15px; }
Specific Row Styling
li:nth-of-type(3) { color: blue; margin-left: 15px; }
p:nth-child(5) { color: green; margin-left: 15px; }
First and Last Element Styling
li:first-of-type { color: blue; margin-left: 15px; }
p:last-of-type { color: green; margin-left: 15px; }
First Two Elements
li:nth-child(-n+2) { color: blue; margin-left: 15px; }
Last Two Elements
p:nth-last-child(-n+2) { color: red; margin-left: 15px; }
All but First and Last Elements
p:not(:first-of-type):not(:last-of-type) { color: orange; margin-left: 15px;}
p:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)) { color: blue; margin-left: 15px;}
Source: http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
Wednesday, June 16, 2010
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment