CSS Selectors – Browser compatibility

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

MDN https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors

tagTimeLog Lite

Simple time tracking tool
Developed by Namu Works