Styling with New Pseudoclasses

Here are a few of the new selectors in CSS3:

A useful selector is "nth-child()" which can take arguments of "even" or "odd".

table.zebraBlueAndGreen tr:nth-child(even) {background-color: #ccf;}
table.zebraBlueAndGreen tr:nth-child(odd)  {background-color: #cfc;}

"nth-child()" with a formula

"nth-child()" can also take arguments of the form "an+b" where "a" is a mulitplier, "n" is the counter, and "b" is an offset. So, "nth-child(2n+2)" would effect every other row starting with the second row.

To understand which rows are effected, put integers in for "n" and start with 0. So a "3n+1" formula would start with row 1, since "3*0+1" is 1. It would then effect row 4, since "3*4+1" is 4.

table.tricolor tr:nth-child(3n+1)  {background-color: red;}
table.tricolor tr:nth-child(3n+2)  {background-color: white;}
table.tricolor tr:nth-child(3n)    {background-color: LightSkyBlue;}

Data Source

Selecting the rows has this formula. "n" starts at zero and then increments. The first row of the table is row 1 (it is not zero based).

But the above example only works because we did not use <thead> or <tbody> in the table (like we should) and did not use "th". A better solution is to use "nth-type-of". This allows global styling of header rows

table.tricolorPlus tr:nth-of-type(3n+1)  {background-color: red;}
table.tricolorPlus tr:nth-of-type(3n+2)  {background-color: white;}
table.tricolorPlus tr:nth-of-type(3n)    {background-color: LightSkyBlue;}
table.tricolorPlus tr:nth-last-child(1)  {background-color: green;}

Rounded Corners

Now any element can have rounded corners by adding:

.round5 {
  -webkit-border-radius: 5px; /* only needed for older webkits */
  -moz-border-radius: 5px; 
  border-radius: 5px; 
}

Media Queries

Media queries are a big deal in the responsive web world. You can adjust your CSS based on the screen width, height, resolution, aspect ratio and many other properties. Here's an example of setting the padding on an 'h1' tag to be tiny for mobile phones.

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    h1 { padding: 2px; }
}

You can also selective import css files based on the type of media

<link rel="stylesheet" href="myPrint.css" media="print">

Or for a screen width:

<link rel="stylesheet" media="(max-width: 800px)" href="800.css" />