CSSのレベル1～4までのセレクタ―一覧Example

基本セレクタ― (type selector)

パターン	説明	CSSレベル
*	すべての要素	2
E	E要素	1
E.foo	クラス名（class要素）fooを持つE要素	1
E#foo	ID名（id要素）fooを持つE要素	1

結合セレクター

パターン	説明	CSSレベル
E F	E要素の子孫要素であるF要素	1
E1,E2,E3	グループ要素 ( , カンマ）で区切り複数の要素に同時に指定	1
E >> F	E Fと同じ仕様（こちらは明確な指定）	4
E > Fexample	E要素の子要素であるF要素	2
E + Fexample	E要素の直後の兄弟要素であるE要素	2
E ~ Fexample	E要素の後（以降）の兄弟要素であるE要素	3
?E F	子孫要素であるF要素の先祖E要素	4

属性セレクター

パターン	説明	CSSレベル
E[foo]example	foo属性を持つE要素	2
E[foo="bar"]example	foo属性の値がbarであるE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	2
E[foo~="bar"]	foo属性のスペース（空白）区切りの値で、その中の1つがbarであるE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	2
E[foo^="bar"]	foo属性の値がbarで開始するE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	3
E[foo$="bar"]	foo属性の値がbarで終了するE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	3
E[foo*="bar"]	foo属性の値にbarが含まれるE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	3
E[foo|="bar"]	foo属性のハイフン区切りの値で、barから始まるE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	2

疑似クラス

※ E要素が書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。

パターン	説明	CSSレベル
:root	文書のルート（HTML）要素	3
E:link	遷移先が未訪問であるE要素	1
E:hoverexample	E要素にカーソルがのったE要素	1
E:active	クリック中のE要素	1
E:focus	フォーカスされているE要素	2
E:nth-child(n) E:nth-child(an+b) example	n番目の子要素であるE要素 （E要素が範囲ではない） 引数nはodd（奇数で2n+1と同じ意味）、even（偶数で2nと同じ意味）というキーワードの指定が可能 引数aはa個毎（aの倍数の要素）、引数bは範囲 aが負である場合はnth-last-childと同じ動作となる 引数aが指定され、引数bの指定がない場合は引数bは0として扱われる	3
E:first-childexample	最初の子要素であるE要素 （E要素が範囲ではない）	2
E:last-child	最後の子要素であるE要素 （E要素が範囲ではない）	3
E:nth-last-child(n) E:nth-last-child(an+b)	最後からn番目の子要素であるE要素 （E要素が範囲ではない） 引数はnth-childと同じ仕様 aが負である場合はnth-childと同じ動作となる	3
E:nth-of-type(n) E:nth-of-type(an+b)	E要素（同じ型）のn番目の子要素であるE要素 引数はnth-childと同じ仕様	3
E:nth-last-of-type(n) E:nth-last-of-type(an+b)	E要素（同じ型）の最後からn番目の子要素であるE要素 引数はnth-childと同じ仕様	3
E:nth-match(an+b of selector-list)		4
E:nth-last-match(an+b of selector-list)		4
E:first-of-type	E要素（同じ型）の最初の子要素であるE要素	3
E:last-of-type	E要素（同じ型）の最後の子要素であるE要素	3
E:only-child	兄弟要素が存在しない唯一のE要素 （E要素が範囲ではない）	3
E:only-of-type	E要素（同じ型）の兄弟要素が存在しない唯一のE要素	3
E:empty	空のE要素 コメントも空として扱うが、改行やインデント、全角・半角スペースなどは空として扱われない	3
E:blank	空のE要素 コメント、半角スペース、改行、インデントも空として扱う ※ Firefox実験的実装：-moz-only-whitespace	4
E:visited	遷移先が訪問済であるE要素	1
E:focus-within		4
E:target	遷移先がハッシュで参照（遷移）したE要素	3
E:any-link	E:linkとE:visitedの両方の意味を持つ擬似クラス	4
E:local-link		4
E:local-link(n)		4
E:lang(c)	lang属性の値が引数cを持つE要素	2
E:dir(d)		4
E:enabled	有効であるE要素	3
E:disabled	無効であるE要素	3
E:checked	チェックされているE要素	3
E:indeterminate	チェックが不確定状態となっているE要素	-
E:default	チェックボックスやセレクトなどで初期値が指定されているE要素	-
E:placeholder-shown	placeholder属性を持つE要素 ※ Chrome、Safari、Opera実験的実装：E::-webkit-input-placeholder ※ Firefox実験的実装：E::-moz-placeholder ※ IE実験的実装：E:-ms-input-placeholder	4
E:required	required属性を持つE要素	-
E:optional	optional属性を持つあるいはrequired属性を持たないE要素	-
E:valid	妥当性検査に成功したE要素	-
E:invalid	妥当性検査に失敗した（エラーとなった）E要素	-
E:user-invalid		4
E:user-error		4
E:in-range	数値が指定範囲内であるE要素	-
E:out-of-range	数値が指定範囲外（エラー）であるE要素	-
E:read-only	readonly属性を持つE要素 ※ Firefox実験的実装：E:-moz-read-only	4
E:read-write	編集可能なE要素 ※ Firefox実験的実装：E:-moz-read-write	4
E:not(s)	引数sのセレクタ―に一致しないE要素	3
E:not(s, s...)	E:not(s)の引数sが複数指定できるパターン	4
E:matches(s[, s...])	引数sであるE要素 ※ Chrome、Safari、Opera実験的実装：E:-webkit-any(s[, s...]) ※ Firefox実験的実装：E:-moz-any(s[, s...])	4
E:current(s[, s...])		4
E:past(s[, s...])		4
E:future(s[, s...])		4
E:has(s[, s...])	引数sの子孫要素を持っているE要素	4
E:drop E:drop(k)		4
E:column(s)		4
E:nth-column(an+b)		4
E:nth-last-column(an+b)		4
E::backdrop		-
E:fullscreen		-

疑似要素

パターン	説明	CSSレベル
E::first-line	E要素の最初の一行 br要素などの改行や自動の折り返しで、折り返されたものは一行として含まれない	1
E::first-letter	E要素の最初の一文字	1
E::selection	E要素内で選択された要素（文字や画像などを含む）	3
E::beforeexample	E要素の最初の子要素として生成するコンテンツ要素 CSSレベル2ではコロンが1つ、CSSレベル3からはコロンが2つとなることに注意	2
E::after	E要素の最後の子要素として生成するコンテンツ要素 CSSレベル2ではコロンが1つ、CSSレベル3からはコロンが2つとなることに注意	2
E::marker	E要素をulやol要素と同等に扱う ulやol要素のみで使用可能なプロパティが使用可能となる	-

IE独自

パターン	説明	CSSレベル
E::-ms-expand	select要素の初期状態にあるE要素	-
E::-ms-clear	バツ（入力内容のクリア）ボタンがあるE要素	-
E::-ms-reveal	type属性がpasswordで目マークのE要素	-

CSSセレクタの使用例

子セレクタ [ E > F ] E要素の子要素であるF要素turn top

CSS
    /* [text]というclassが付いた div タグの直下の子要素の span タグのみに適用 */
    div.text > span {
      color: red;
    } 
HTML
   <div class="text">
      <span>[text]というclassがついたdivタグの直下のspan(子要素)なので赤くなる</span>
      <p><span>[text]というclassがついたdivの中のpの中のspan(孫要素)なので赤くならない</span></p>
    </div>
    <div>
      <span>[text]というclassがついてないdivの直下なので赤くならない</span>
    </div>

隣接セレクタ turn top

CSS
    /* h2 タグに隣接してる p タグに適用 */
    h2 + p {
      color: red;
    }
HTML
    <h2>見出し</h2>
      <h3>見出し</h3>
        <p>h2に隣接してないので赤くならない</p>
    <h2>見出し</h2>
      <p>h2に隣接してるので赤くなる</p>
      <p>h2に隣接してないので赤くならない</p>

間接セレクタ turn top

ある要素以降の兄弟要素に適用

CSS
    /* h2 タグ以降の p タグに適用 */
    h2 ~ p{
      color: red;
    }
HTML
    <h1>見出し</h1>
    <p>ここは赤くならない</p>
    <h2>h2タグ自身は赤くならない</h2>
    <p>h2タグ以降の兄弟のpタグなので赤くなる</p>
    <div>
      <p>孫要素は赤くならない</p>
    </div>
    <p>間に他のタグが入っても</p>
    <p>pタグ以降の兄弟のpタグなので赤くなる</p>

属性セレクタ(attribute selector)turn top

要素の後に [ ]で属性を指定すると、任意の属性を持つセレクタに適用

CSS
    /* target属性を持つ a タグに適用 */
    a[target]{
      color: red;
    }
HTML
    <a href="#" target="_blank">target="_blank"</a>
    <a href="#" target="_self">target="_self"</a>
    <a href="#" target="_top">target="_top"</a>
    <a href="#" target="window">target="window"</a>

CSS
    /* target属性の値が _blank になっている a タグに適用 */
    a[target="_blank"]{
      color: red;
    }
HTML
        <a href="#" target="_blank">target="_blank"</a>
        <a href="#" target="_self">target="_self"</a>
        <a href="#" target="_top">target="_top"</a>
        <a href="#" target="window">target="window"</a>

擬似クラス(Pseudo-classes)turn top

:first-child
最初に当てはまる要素 だけにスタイルが適用

CSS
    p{
      color: blue;
    }
    /* 最初の p タグだけ適用 */
    p:first-child{
      color: red;
    }
HTML
  <p>最初のpは赤くなる</p>
  <p>2番目以降のpは赤くならない</p>
  <p>2番目以降のpは赤くならない</p>

:nth-child(n)
最初から数えて「n番目」に当たる子要素 にスタイルが適用

CSS
    /* 3番目の li タグを赤くする */
    ul li:nth-child(3){
      color: red;
    }
HTML
    <ul>
      <li>1番目のli</li>
      <li>2番目のli</li>
      <li>3番目のliは赤くなる</li>
      <li>4番目のli</li>
      <li>5番目のli</li>
    </ul>

:hover
要素にマウスが乗っている間 だけスタイルが適用

CSS
    a:hover{
      color: red;
    }
HTML
    <a href="#">マウスを乗せている時だけ赤くなる</a>
    <a href="#">マウスを乗せている時だけ赤くなる</a>

擬似要素（pseudo elements）turn top

::beforer
::after
要素の直前・直後に内容を挿入する際に使用、挿入内容はcontentプロパティで指定 セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにする

CSS
    h3::before {content:"★";}
    strong::before {content:"【";}
    strong::after {content:"】";}
HTML    
    <h3>今日のお天気</h2>
    <p>今日は<strong> 晴れ </strong>です。</p>
    <h3>明日のお天気</h2>
    <p>今日は<strong> 雨 </strong>です。</p>
Display    
        
★今日のお天気
      今日は【晴れ】です。
        
★明日のお天気
      明日は【雨】です。