CSS3 の Selectors と CSS3 Advanced Layout Module

• Selectors 最終草案 (Last Call Working Draft)
• CSS3 Advanced Layout Module 草案（Working Draft）

Selectors

増えているものや削除されたものがあるみたいね。とりあえず、メモとして現状 CSS3 で追加されたセレクタを全て抜き出してみる。

E[foo^="bar"]

foo 属性値が文字列 bar で始まる E 要素にマッチ

E[foo$="bar"]

foo 属性値が文字列 bar で終わる E 要素にマッチ

E[foo*="bar"]

foo 属性値が部分文字列 bar を含んでいる E 要素にマッチ

E:root

ドキュメントのルートである E 要素にマッチ

E:nth-child(n)

親の中で n 番目の子である E 要素にマッチ

E:nth-last-child(n)

親の中で最後から数えて n 番目の子である E 要素にマッチ

E:nth-of-type(n)

同じ要素名を持つ兄弟の n 番目の E 要素にマッチ

E:nth-last-of-type(n)

同じ要素名を持つ兄弟の最後から数えて n 番目の E 要素にマッチ

E:last-child

親の中で最後の子である E 要素にマッチ

E:first-of-type

同じ要素名を持つ兄弟の最初の E 要素にマッチ

E:last-of-type

同じ要素名を持つ兄弟の最後の E 要素にマッチ

E:only-child

親の中で唯一の子である E 要素にマッチ

E:only-of-type

親の中で唯一の要素名を持つ E 要素にマッチ

E:empty

子（テキストノードも含む）を全く持たない E 要素にマッチ

E:target

参照 URI のターゲットとなる E 要素にマッチ

E:enabled

E:disabled

有効または無効であるユーザインターフェース要素 E にマッチ

E:checked

チェックされているユーザインターフェース要素 E にマッチ（ラジオボタンやチェックボックス等）

E::selection

ユーザによって選択 / ハイライトされている E 要素の一部にマッチ

E:not(s)

単純セレクタ s にマッチしない E 要素にマッチ

E ~ F

E 要素が先に出現している F 要素にマッチ

CSS3 Advanced Layout Module

まだ未読だけど、最初の 3.Template-based positioning を見ただけでもなんか色々と凄そうね。グリッド配置が自由自在って感じ？。あと、タブっぽいやつも簡単そう。Example のソースは、なんとなく萎える感じだけど。