Wednesday, June 16, 2010

CSS3 Selectors: Alternate Row Styling

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/

No comments:

Post a Comment