CSS3対応のCSSセレクタ一覧

|

CSS3は2009年7月8日現在、Working Draftの段階ですが、モダンブラウザでは先行して実装されています。

Webサイトを制作する際、IEがネックとなっていますが、IE8ではよりWeb標準に近づいた動作をしますので、積極的に新しいCSSに挑戦するのも面白いと思います。

さて本題ですが、CSS3を含むCSSセレクタを一覧にしました。ご参考ください。

セレクタパターン意味セレクタの種類定義されたCSSレベル
* すべての要素を対象にするセレクタユニバーサルセレクタ2
E E要素に対してスタイルを適用タイプセレクタ1
E[foo] foo属性を持つE要素に対してスタイルを適用属性セレクタ2
E[foo="bar"] barという値のfoo属性を持つE要素に対してスタイルを適用属性セレクタ2
E[foo~="bar"] barという値を1つでも含んでいるfoo属性を持つE要素に対してスタイルを適用属性セレクタ2
E[foo^="bar"] barという値から始まるfoo属性を持つE要素に対してスタイルを適用属性セレクタ3
E[foo$="bar"] barという値で終わるfoo属性を持つE要素に対してスタイルを適用属性セレクタ3
E[foo*="bar"] barという文字列を含むfoo属性を持つE要素に対してスタイルを適用属性セレクタ3
E[hreflang|="en"] en(言語)という値のhreflang属性をもつE要素に対してスタイルを適用属性セレクタ2
E:root ドキュメント内のルート要素である E という要素にスタイルを適用(HTMLの場合はhtml)擬似クラス3
E:nth-child(n) 親要素の n 番目の子要素である E 要素にスタイルを適用擬似クラス3
E:nth-last-child(n) 親要素の 最後から数えてn番目の子要素である E 要素にスタイルを適用擬似クラス3
E:nth-of-type(n) 兄弟関係にある n 番目の E 要素にスタイルを適用擬似クラス3
E:nth-last-of-type(n) 兄弟関係にある 最後から数えてn 番目の E 要素にスタイルを適用擬似クラス3
E:first-child 親要素の最初の子要素である E 要素にスタイルを適用擬似クラス2
E:last-child 親要素の最後の子要素である E 要素にスタイルを適用擬似クラス3
E:first-of-type 兄弟関係にある最初の E 要素にスタイルを適用擬似クラス3
E:last-of-type 兄弟関係にある最後の E 要素にスタイルを適用擬似クラス3
E:only-child 親要素の唯一の(兄弟関係を持たない) 子要素であるE要素にスタイルを適用擬似クラス3
E:only-of-type 兄弟関係にあるE要素にスタイルを適用擬似クラス3
E:empty テキストノードも含めて子要素を持たないE要素にスタイルを適用擬似クラス3
E:link未訪問のハイパーリンクのソースのアンカーであるE要素にスタイルを適用リンク擬似クラス1
E:visited 訪問済みハイパーリンクのソースのアンカーであるE要素にスタイルを適用リンク擬似クラス1
E:activeクリックなどでアクティブになったE要素にスタイルを適用ダイナミック擬似クラス1
E:hoverマウスポインタで指し示されたE要素にスタイルを適用ダイナミック擬似クラス1
E:focus タブキーなどでフォーカスされているときのE要素にスタイルを適用ダイナミック擬似クラス2
E:target 参照URIの目標であるE要素にスタイルを適用ターゲット擬似クラス3
E:lang(fr) 前方一致で fr という lang 属性値を持つE要素にスタイルを適用言語擬似クラス2
E:enabled有効な (:enabled)E要素にスタイルを適用UI 要素状態擬似クラス3
E:disabled 無効な (:disabled)E要素にスタイルを適用UI 要素状態擬似クラス3
E:checked ラジオボタンあるいはチェックボックスがチェックされた状態のときにE要素にスタイルを適用UI 要素状態擬似クラス3
E::first-line E要素の最初の 1行にスタイルを適用擬似要素1
E::first-letter E要素の最初の 1文字にスタイルを適用擬似要素1
E::selection ユーザが選択したE要素の一部にスタイルを適用擬似要素3
E::before E要素の内容の前にスタイルを適用擬似要素2
E::after E要素の内容の後にスタイルを適用擬似要素2
E.warning warningというクラス名を持つE要素にスタイルを適用クラスセレクタ1
E#myid myidというID名を持つE要素にスタイルを適用IDセレクタ1
E:not(s) sでないセレクタを持つE要素にスタイルを適用否定擬似クラス3
E F E要素と孫子関係にあるF要素にスタイルを適用子孫セレクタ 1
E > F E要素と直接の子関係にあるF要素にスタイルを適用子セレクタ2
E + F E要素と弟関係にあるF要素にスタイルを適用隣接セレクタ2
E ~ F E要素が前にあるF要素にスタイルを適用間接セレクタ3

参考サイト

このページに関連する記事

最近のブログ記事