Cascading Style Sheets 3 (CSS3) improves upon earlier versions. The definitive guide to CSS3 is at the www.w3.org. So, what's new?

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;}
PatternMeaning
E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one Structural pseudo-classes
E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes
E:last-child an E element, last child of its parent Structural pseudo-classes
E:first-of-type an E element, first sibling of its type Structural pseudo-classes
E:last-of-type an E element, last sibling of its type Structural pseudo-classes
E:only-child an E element, only child of its parent Structural pseudo-classes
E:only-of-type an E element, only sibling of its type Structural pseudo-classes
E:empty an E element that has no children (including text nodes) Structural pseudo-classes
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element states pseudo-classes

"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;}
ProgramPercentage of US Spending (2011)
Defense20
Social Security20
Medicare, Medicaid, and CHIP21
Safety Net Programs13
Interest on Debt6
Benerfits for Federal Retirees and Veterans7
Transportation Infrastructure3
Education2
Science and Medical Research2
Other6
Total100

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;}
ProgramPercentage of US Spending (2011)
Defense20
Social Security20
Medicare, Medicaid, and CHIP21
Safety Net Programs13
Interest on Debt6
Benerfits for Federal Retirees and Veterans7
Transportation Infrastructure3
Education2
Science and Medical Research2
Other6
Total100

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" />
Go to Home page. Kindly report errors, typos, or misspellings here.