CSS3 の Selectors と CSS3 Advanced Layout Module

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 のソースは、なんとなく萎える感じだけど。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/54

我的春秋 - CSS 3 セレクタ最終草案リリース (2005年12月23日 21:49)

対応ブラウザ: ?(未確認) (CSS Level 3) CSS 3 セレクタ 続きを読む

Imaginary Affair - CSS3 Selectors (2005年12月23日 23:52)

Lucky bag::blog: CSS3 の Selectors と CSS3... 続きを読む

Comments

ゆう said:

はじめまして。いつも愛読させてもらってる ゆう といいます。

すみませんが、トラバが重複しちゃいましたので、どちらか削除していただければ幸いです。慣れないもんで本当にすみません。(T-T)

CSS 3 セレクタがあとちょっとで勧告。これでちょっとでも class や id が減る方向で進んでいくと楽なんでっすけどね。まずは IE 7 次第ですけど。(でも後方互換を考えると意外に遠い未来の話になるのかも?!)

e-luck said:

はじめまして。
重複の方、削除しておきました。

>でも後方互換を考えると意外に遠い未来の話になるのかも?!

そうですねー、実際にこれらが普通に使えるようになるのは IE 次第でしょうね。IE7 リリース後にこまめにレンダリングエンジンに手を加えてバージョンアップしながら実装していってくれれば良いのですが。