MENU
HOMEWebCSSセレクタ ブラウザ対応状況など

CSS CSSセレクタ ブラウザ対応状況など

セレクタ 意味 Lv 種類 Chrome Firefox IE Opera Safari
* すべての要素を対象にするセレクタ 2 ユニバーサルセレクタ 1-
* すべての要素を対象にするセレクタ 名前空間との組み合わせのサポート 3 ユニバーサルセレクタ 1- 8 1.3
E E(要素)に対してスタイルを適用 1 タイプセレクタ
. class指定 1 classセレクタ
# id指定 1 idセレクタ
EF Eの子孫要素Fにスタイルを適用 1 子孫セレクタ
E>F Eの直接の子要素Fにスタイルを適用 2 子セレクタ 7-
E+F Eの直後にあるFにスタイルを適用(E,Fは同じ親要素) 2 隣接セレクタ 8-
E[att] att属性を持つEにスタイルを適用 2 属性セレクタ 1- 7- 9- 3-
E[att=”val”] valという値のatt属性(のみ)を持つEにスタイルを適用 2 属性セレクタ 1- 7- 9- 3-
E[att~=”val”] valという値を含んでいるatt属性を持つEにスタイルを適用 2 属性セレクタ 1- 7- 9- 3-
E[att|=”en-us”] en(言語)という値のhreflang属性をもつEにスタイルを適用 2 属性セレクタ 1- 7- 9- 3-
E:first-child 親要素内の最初の子要素Eにスタイルを適用 2 構造擬似クラス 4- 3- 7- 9.5- 4-
E:lang(ja) ja(前方一致)のlang属性値を持つEにスタイルを適用 2 言語擬似クラス 8-
E:before contentプロパティで指定した内容が指定要素の前に生成。 2 擬似要素 1- 8- 4- 4-
E::before contentプロパティで指定した内容が指定要素の前に生成。 2 擬似要素 1.5- 9- 7- 4-
E:after contentプロパティで指定した内容が指定要素の後に生成。 2 擬似要素 1- 8- 4- 4-
E::after contentプロパティで指定した内容が指定要素の後に生成。 3 擬似要素 1.5- 9- 7- 4-
E:first-letter Eの最初の1文字にスタイルを適用 1 擬似要素 1- 1- 5.5- 3.5- 1-
E::first-letter Eの最初の1文字にスタイルを適用 1 擬似要素 1- 1- 9- 7- 1-
E:first-line Eの最初の1行にスタイルを適用 1 擬似要素 1- 1- 5.5- 3.5- 1-
E::first-line Eの最初の1行にスタイルを適用 1 擬似要素 1- 1- 9- 7- 1-
E[att^=”val”] valという値から始まるatt属性を持つEにスタイルを適用 3 属性セレクタ 1- 7- 9- 3-
E[att$=”val”] valという値で終わるatt属性を持つEにスタイルを適用 3 属性セレクタ 1- 7- 9- 3-
E[att*=”val”] valという文字列を含むatt属性を持つEにスタイルを適用 3 属性セレクタ 1- 7- 9- 3-
E~F E以降にあるFにスタイルを適用(E,Fは同じ親要素) 3 兄弟セレクタ ? 1- 7- 9- 3-
E:root 文書内のルート要素であるE要素にスタイルを適用(HTMLの場合はhtml) 3 擬似クラス 1- 1- 9- 9.5- 1-
E:last-child 親要素内の最後の子要素Eにスタイルを適用 3 擬似クラス 1- 1- 9- 9.5- 3.2-
E:only-child 要素内で唯一の子要素Eにスタイルを適用 3 擬似クラス 2- 1.5- 9- 9.5- 3.1-
E:nth-child(n) 親要素内のn番目の子要素Eにスタイルを適用 3 擬似クラス 1- 3.5- 9- 9.5- 3.1-
E:nth-child(odd) 親要素内の奇数番目の子要素Eにスタイルを適用 3 擬似クラス 1- 3.5- 9- 9.5- 3.1-
E:nth-child(even) 親要素内の偶数番目の子要素Eにスタイルを適用 3  擬似クラス 1- 3.5- 9- 9.5- 3.1-
E:nth-last-child(n) 親要素内の最後から数えてn番目の子要素Eにスタイルを適用 3 擬似クラス 4- 3.5- 9- 9.5- 3.2-
E:first-of-type 親要素内の最初のEにスタイルを適用 3 擬似クラス 1- 3.5- 9- 9.5- 3.2-
E:last-of-type 親要素内の最後のEにスタイルを適用 3 擬似クラス 1- 3.5- 9- 9.5- 3.2-
E:only-of-type 親要素内にEが、ひとつしかない場合にスタイルを適用 3 擬似クラス 1- 3.5- 9- 9.5- 3.2-
E:nth-of-type(n) 親要素内のn番目のEにスタイルを適用 3 擬似クラス 1- 3.5- 9- 9.5- 3.2-
E:nth-last-of-type(n) 親要素内の最後から数えてn番目のEにスタイルを適用 3 擬似クラス 4- 3.5- 9- 9.5- 3.2-
E:empty テキストも含めて子要素を持たないEにスタイルを適用 3 擬似クラス 1- 1- 9- 9.5- 3.1-
E:not(s) sではないセレクタを持つEにスタイルを適用 3 擬似クラス 1- 1- 9- 9.5- 3.2-
E:target リンクの飛び先(#で指定された)であるEにスタイルを適用 3 擬似クラス 1- 1.3- 9- 9.5- 1.3-
E:enabled 有効な(:enabled)要素Eにスタイルを適用 3 擬似クラス 1- 1- 9- 9- 3.1-
E:disabled 無効な(:disabled)要素Eにスタイルを適用 3 擬似クラス 1- 1- 9- 9- 3.1-
E:checked ラジオボタンまたはチェックボックスがチェックされているEにスタイルを適用 3 擬似クラス 1- 1- 9- 9- 3.1-
E:link 未訪問のアンカーEにスタイルを適用 1 擬似クラス 1- 1- 3- 3.5- 1-
E:visited 訪問済みのアンカーEにスタイルを適用 1 擬似クラス 1- 1- 3.5- 3.5- 5-
E:active アクティブになったEにスタイルを適用 要素のみ 1 擬似クラス 1- 1- 4- 5- 1-
E:active アクティブになったEにスタイルを適用 全要素 1 擬似クラス 1- 1- 8- 7- ?
E:hover カーソルが重なったEにスタイルを適用 要素のみ 1 擬似クラス 0.2- 1- 4- 4- 2.0.4-
E:hover カーソルが重なったEにスタイルを適用 全要素 1 擬似クラス 0.2- 1- 7- 7- 2.0.4-
E:focus タブキーなどでフォーカスされているEにスタイルを適用 2 擬似クラス 1- 1- 8- 7- 1-
セレクタ 意味 Lv 種類 Chrome Firefox IE Opera Safari

(参考)MDN https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors


個人用にメモ程度にざっとまとめたものです。
誤りがあるかもしれませんのでご注意ください(ご指摘いただけるとありがたいです)


Webmaster Knowledge
ページの先頭へ