IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。

Child Selector

結合子を">"で繋ぐことによって、その要素の直下に存在する要素のみstyleをかけることができます。

:root

bodyの外側に、styleをかけることができます。
IEで見た時に、背景が赤くなってしまうのが嫌だったので:rootを使用しました。

:before, :after

擬似的に要素を作ることができます。

:first-child

その要素の中で一番始めにくる要素を指定できます。

:nth-child(n)

その要素の中で何番目の要素かを指定できます。
数字で指定,　odd,　even,　数列のような書き方まで幅広く使えます。

:last-child

その要素の中で一番最後の要素を指定できます。

Multiple Background images

背景画像を複数枚指定することができます。カンマ区切りで背景を指定します。

background:url(img.png) ,
    url(img2.png) ,
    url(img3.png);}

Overflow-x, y

元々はIEの独自プロパティでしたが、CSS3になりました。

body {overflow-x:hidden;}

Opacity

要素自体の不透明度を変更することができます。

a img:hover {opacity:.8;}

RGBA

カラーの不透明度を変更することができます。

background-color:rgba(255, 43, 123, .8);

Box Shadow

要素に影をつけることができます。
insetをつけることで、内側にも影をつけることができます。

box-shadow:0 1px 5px #666 ,
    inset 0 5px 5px #111;

Text Shadow

文字に影をつけることができます。

text-shadow:0 -1px 2px #666;

Content

:afterや:beforeと一緒に使うことが多いです。
contentを使用すると、文字、数字、画像、titleやhrefの中身などを表示することができます。
:after, :beforeではなく、要素自体に使うと"Image replacement"となり、contentの内容に置き換えることができます。ただし現在ではOperaしかフルサポートされていません。

nav li:before{
    content:"\3e";
    margin:0 5px 0 0;
    color:#fff;}

2D Transforms

回転(rorate), 拡大縮小(scale), ゆがみ(skew), 移動(translate)など行うことができます。
transform-originでtransformの基点をあらかじめ決めておくと良いかもしれません。初期値は50% 50%です。
現時点ではprefixが必須です。

header>header>ul li {
    -o-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -webkit-transform-origin:0 0;
    transform-origin:0 0;}

ul li:first-child {
    -o-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg);}

Transitions

簡単なアニメーション機能を加えることができます。カンマ区切りでプロパティを増やせます。

transition:background-color 1s 0s;

Border Radius

角丸にすることができます。

border-radius:10px;

Gradient

背景にグラデーションを行うことができます。
少し前までは、Webkit, FireFoxしか使えず、さらに記述方法もWebkit, FireFoxでバラバラでしたが、最近統一されて、Operaもgradientが使用できるようになりました。
ただしそれぞれのprefixが必要になります。

background:    -o-linear-gradient(transparent 10%, rgba(255, 255, 255, .8) 30%);
background:    -moz-linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 30%);
background:    -webkit-linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 30%);
background:    linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 30%);

transparentで透明にすることができますが、Opera以外だと影が入ってしまうのでrgba(255, 255, 255, 0)という記述にしています。
また今回は使っていませんでしたが、background-sizeと相性が良さそうです。