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

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

  • 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
セレクタ 意味 種類 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セレクタ          
EF Eの子孫要素Fにスタイルを適用 子孫セレクタ          
E>F Eの直接の子要素Fにスタイルを適用 子セレクタ   7-        
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/ja/docs/Web/CSS/CSS_Selectors


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

ページの先頭へ