AYA memo

CSS セレクタ

PDFダウンロード

CSSセレクタチートシート Download

A4 用紙に印刷可能な CSSセレクタチートシートです。
A4 用紙におさめるため、サイトと一部異なる内容になっています。

セレクタの詳細度

セレクタの詳細度 ≒ セレクタの優先順位。
１つの要素に複数のスタイルが指定された場合、より詳細度の大きいセレクタのスタイルが優先されます。（詳細度が同じ場合は、後に書かれた方が優先されます）。 詳細度の点数は、セレクタの指定方法ごとに以下のように点数が決められています。 複数の指定方法を組み合わせたセレクタの場合は、それぞれの指定方法の点数が加算されます。 （例：#id.class-name の場合、ID指定の詳細度 100 + クラス指定の詳細度 10 = 110 ）

詳細度の点数

!important
最優先
※非推奨
同じ要素に二つの競合する宣言が !important ルール付きで適用された場合、より高い詳細度の宣言が適用される。
style属性（style="..."）
点数＝1000
※非推奨
ID
点数＝100
#example
クラス
属性
疑似クラス
点数＝10
.example [type="radio"] :hover
要素名
疑似要素
点数＝1
h1 ::before
全称
結合子
否定疑似クラス
点数＝0
* + > ~ || :not()

複数セレクタの並記

複数のセレクタを並記した場合、セレクタの間に何を指定するかで意味合いが変わります。
カンマ区切りがOR指定、区切りなしがAND指定。それ以外は「子孫・兄弟」関係を表わします。

セレクタ1, セレクタ2
複数のセレクタが表わすそれぞれの要素に同じスタイルを指定（OR条件）
セレクタ1セレクタ2
複数のセレクタをすべて満たす要素にスタイルを指定（AND条件）
[属性1][属性2]
複数の属性指定をすべて満たす要素にスタイルを指定（AND条件）

代表的なセレクタ

基本

*
全ての要素
div
タグ名
.クラス名
クラス名（class="cname"のように指定）
#id名
ID名（id="idname"のように指定）

属性

E[属性名]
指定の属性を持つ要素
E[属性名="..."]
属性値が完全一致する要素
E[属性名~="..."]
属性値が複数列挙（スペース区切り）されている中のいずれかに完全一致する要素
E[属性名*="..."]
属性値が部分一致する要素
E[属性名^="..."]
属性値が前方一致する要素
E[属性名$="..."]
属性値が後方一致する要素

子孫・兄弟

E1 E2
子孫（E1 配下の E2 要素すべて）
  • div
    class="main"
    • div
      • div
    • p
      • span
      • div
子も孫も対象。
E1 > E2
子（E1 直下の E2 要素）
  • div
    class="main"
    • div
      • div
    • p
    • div
      • span
子だけ対象。孫は対象外。
E1 ~ E2
弟（E1 より後の、同階層の E2 要素）
  • div
    • div
    • div
      class="now"
    • div
    • div
選択された要素の弟妹。前に存在するものは対象外。
E1 + E2
隣（E1 の直後の、同階層の E2 要素）
  • div
    • div
    • div
      class="now"
    • div
    • div
選択された要素の直後だけ対象。

Eの兄弟要素（Eの親要素の子どもたち）のn番目疑似クラス

of-type指定では、指定したタグだけを最初から順に数えます。前後や途中に他のタグが存在しても影響を受けません。

E:first-of-type
E の兄弟要素の中の、最初の E 要素
  • div
    • img
      1つ目のimg
    • p
      1つ目のp
    • p
      2つ目のp
１つ目のpが対象。
兄弟の先頭はimgだが、pだけを数えるので影響を受けない。
E:last-of-type
E の兄弟要素の中の、最後の E 要素
  • div
    • p
      1つ目のp
    • p
      2つ目のp
    • img
      1つ目のimg
最後のpが対象。
兄弟の最後はimgだが、pだけを数えるので影響を受けない。
E:nth-of-type(...)
E の兄弟要素の中の、先頭から
odd 奇数
even 偶数
3 3番目
3n 3の倍数
n+3 3番目以降
-n+3 3番目まで
のE要素
※n=0始まりの正の整数
  • div
    • p
      1つ目のp
    • img
      1つ目のimg
    • p
      2つ目のp
    • p
      3つ目のp
奇数番目のpが対象。
途中にimgがあるが、pだけを数えるので影響を受けない。
  • div
    • p
      1つ目のp
    • img
      1つ目のimg
    • p
      2つ目のp
    • p
      3つ目のp
    • p
      4つ目のp
3番目までのpが対象。
途中にimgがあるが、pだけを数えるので影響を受けない。
E:nth-last-of-type(2)
E の兄弟要素の中の、後ろから２番目の E 要素
  • div
    • p
      1つ目のp
    • p
      2つ目のp
    • img
      1つ目のimg
    • p
      3つ目のp
後ろから２つ目のpが対象。
途中にimgがあるが、pだけを数えるので影響を受けない。
E:only-of-type
E の兄弟要素の中で、E 要素が１つだけの場合の E 要素
  • div
    • p
      1つ目のp
    • img
      1つ目のimg
pが１つだけなので対象。
imgがあるが、pだけを数えるので影響を受けない。

Eの兄弟要素（Eの親要素の子どもたち）のn番目疑似クラス

child指定では、すべての子要素を順に数えます。該当位置の要素が E の場合のみ適用対象となります。

E:first-child
E の兄弟要素の中の、最初の要素（最初＝E の場合）
  • div
    • p
      1つ目のp
    • img
      1つ目のimg
最初の要素＝pのため、対象。
  • div
    • img
      1つ目のimg
    • p
      1つ目のp
最初の要素≠pのため、対象なし。
E:last-child
E の兄弟要素の中の、最後の要素（最後＝E の場合）
  • div
    • img
      1つ目のimg
    • p
      1つ目のp
最後の要素＝pのため、対象。
  • div
    • p
      1つ目のp
    • img
      1つ目のimg
最後の要素≠pのため、対象なし。
E:nth-child(...)
E の兄弟要素の中の、...番目の要素（...番目＝E の場合）
※ ...部分は[:nth-of-type]と同様
  • div
    • img
      1つ目のimg
    • p
      1つ目のp
    • p
      2つ目のp
3つ目の要素＝pのため、対象。
E:only-child
E の兄弟要素が存在しない場合の E 要素
  • div
    • p
      1つ目のp
兄弟要素の存在しないpのため、対象。
  • div
    • p
      1つ目のp
    • img
      1つ目のimg
兄弟要素が存在するため対象外。

リンクの状態疑似クラス

a:link
未訪問
a:visited
訪問済み
a:any-link
未訪問 or 訪問済み（:link + :visited）
a:hover
ホバー状態
a:active
クリック状態

代表的なform要素

input[type="text"]
テキストボックス
input[type="checkbox"]
チェックボックス
input[type="radio"]
ラジオボタン
textarea
テキストエリア
select
セレクトボックス

form要素の状態疑似クラス

E:enabled
有効な要素

アクティブ化 (選択、クリック、入力など)や、フォーカスを得ることができる状態の要素が対象。

E:disabled
無効な要素

アクティブ化 (選択、クリック、入力など)や、フォーカスを得ることができない状態の要素が対象。

E:checked
チェックされている要素
E:valid
内容の検証に成功したform要素
E:invalid
内容の検証に失敗したform要素
E:in-range
現在の値が min～max 範囲内のinput要素
E:out-of-range
現在の値が min～max 範囲外のinput要素
E:required
requiredが設定されている要素
E:optional
requiredが設定されていない要素
E:read-only
ユーザーが編集できない要素
E:read-write
ユーザーが編集できる要素
E:focus
フォーカスを持つ要素
E:focus-within
自分 or 子孫がフォーカスを持つ要素

その他疑似クラス

E:empty
空の（子要素が存在しない）要素

子要素が存在すると（空白１つでも）対象外になる。コメントはOK。
似たようなセレクタに:blankがあり、こちらは空白があっても対象になる仕様だが、ほとんどのブラウザが対応していない。CSS4で:emptyが空白OKになる予定。

E:target
ページ内リンク押下後のリンク先の要素

このセレクタを活用すると、JavaScript を使わずに要素の表示を切り替えることができる。詳細は mozillaのサンプルを参照。

E:not(セレクタ)
指定したセレクタに一致しない要素

複数指定する場合は:not(div):not(p)のように併記する。

疑似要素疑似要素

E::before
擬似要素を生成（最初の子要素）

contentの指定が必須。

E::after
擬似要素を生成（最後の子要素）

contentの指定が必須。

E::first-letter
ブロックレベル要素の最初の行の最初の文字

一部の CSS プロパティのみ利用可能（詳細はmozilla参照）。
最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がある場合は無効。
::before擬似要素とcontentプロパティの組み合わせで要素の先頭にテキストが挿入された場合、::first-letterは生成されたコンテンツの最初の文字に一致する。

E::first-line
ブロックレベル要素の最初の行

一部の CSS プロパティのみ利用可能（詳細はmozilla参照）。

E::selection
ユーザーが選択した文書の一部

特定の CSS プロパティのみ利用可能（詳細はmozilla参照）。