:nth-child(),
first-of-type,
etc.CSS3 has added comprehensive support allowing you to style odd or even rows or even every 3rd, 4th, 5th or user defined number of rows and other repeating elements such as list items, paragraphs and images, too.
Name | Cards sent | Cards received | Cards written but not sent |
---|---|---|---|
Ann | 40 | 28 | 4 |
Joe | 2 | 27 | 29 |
Paul | 5 | 35 | 2 |
Louise | 65 | 65 | 0 |
Odd or Even Rows, List Items
tr:nth-child(odd) td { color: #86B486;}
li:nth-child(even)
{ color: #86B486;}
Very simple to select odd rows with CSS3 as you can see above example or list items by adding a margin and changing the colour of odd or even list-items.
Every 3rd Row (3n
for every third, -2
to start from imaginary negative 2 rows before the first row
.names tr:nth-child(3n-2) { background-color: #CC9;}
name | Jane |
jane@pasadena.edu | |
phone | x7001 |
name | Joe |
joe@pasadena.edu | |
phone | x7002 |
name | John |
john@pasadena.edu | |
phone | x7003 |
name | Julie |
julie@pasadena.edu | |
phone | x7004 |
first-of-type
to style the lead paragraphs
p:first-of-type {
font: bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;}
nth-child has limited browser support. It is not supported in Internet Explorer 8 or Opera. Firefox 3.5 and Safari 3.1 do have support.
In some situations however, you might want to consider using JavaScript to add this support to browsers that don’t have it. JQuery is used in this example
Based on: http://24ways.org/2009/cleaner-code-with-css3-selectors
http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/