CSSのセレクタ一覧表
セレクタは必要に応じて使い分ける
CSSにはスタイルの適用範囲を定めるセレクタが数多く用意されています。最初から全てを覚える必要はありません。状況に応じて使えるパターンを増やしていきましょう。
CSSセレクタ早見表
基本セレクタ
構文 |
名称 |
説明 |
* |
ユニバーサルセレクタ |
全ての要素を選択 |
E(要素名) |
タイプセレクタ |
Eという名称の要素を選択 |
.classname |
クラスセレクタ |
class属性の値に一致する要素を選択 |
#idname |
IDセレクタ |
id属性の値に一致する要素を選択 |
E[foo] |
属性セレクタ |
foo属性が設定されたE要素を選択 |
E[foo="bar"] |
属性セレクタ |
foo属性の値がbarと完全に一致するE要素を選択 |
E[foo~="bar"] |
属性セレクタ |
foo属性に複数の空白区切りの値がある場合にbarを持つE要素を選択 |
E[foo|="bar"] |
属性セレクタ |
foo属性がハイフン区切りの値である場合に前方一致のbarを持つE要素を選択 |
E[foo^="bar"] |
属性セレクタ |
foo属性の値が前方一致のbarである場合にE要素を選択 |
E[foo$="bar"] |
属性セレクタ |
属性の値が後方一致のbarである場合にE要素を選択 |
E[foo*="bar"] |
属性セレクタ |
foo属性の値が部分一致でbarを含む場合のE要素を選択 |
グルーピング・セレクタ
疑似クラス
疑似要素
基本セレクタ
ユニバーサルセレクタ(Universal selector)
- 構文
- *
- 説明
- 記号のアスタリスクで全ての要素を選択します。
- 用例
- * { font-size: 100%;}
タイプセレクタ(Type selector)
- 構文
- E(elementname)
- 説明
- HTMLタグの名称に基づく要素を全て選択します。
- 用例
- h1 { font-wight: bold;}
クラスセレクタ(Class selector)
- 構文
- .classname
- 説明
- class属性の値に一致する要素を選択します。
- 用例
- .box { padding: 10px;}
IDセレクタ(ID selector)
- 構文
- #idname
- 説明
- id属性の値に一致する要素を選択します。
- 用例
- #item { color: #ff0000;}
属性セレクタ(Attribute selector)
- 構文
- E[attr], [attr="value"], [attr~="value"], [attr|="value"], [attr^="value"], [attr$="value"], [attr*="value"]
- 説明
- 与えられた属性、またはその値を含む条件に一致する要素を選択します。
- 用例
-
- a[title]:title属性を持つ<a>に一致
- a[title="step"]:title属性にstepの値を持つ<a>に一致
- a[class~="jump"]:複数の空白区切りの値の中からjumpを持つ<a>に一致
- p[lang|="en"]:enから始まるハイフン区切りの値を持つ<p>に一致
- p[lang^="en"]:lang属性の値が前方一致でenから始まる場合の<p>に一致
- img[src$="png"]:src属性の値が後方一致でpngで終わる場合の<img>に一致
- img[src*="thmb"]:src属性の値が部分一致でthmbを含む場合の<img>に一致
グルーピング・セレクタ
セレクタ・リスト(Selector list)
- 構文
- E, F
- 説明
- 複数のセレクタをカンマ(,)で区切って同時に選択します。
- 用例
- h1, h2 { margin: 0;}
子孫結合子(Descendant combinator)
- 構文
- E F
- 説明
- 親要素の子孫に配置された要素を半角スペースで区切って選択します。
- 用例
- ul li { margin-bottom: 10px;}
子結合子(Child combinator)
- 構文
- E > F
- 説明
- 親要素の中に配置された直接の子要素を不等号(>)で区切って選択します。
- 用例
- ul > li { margin-bottom: 10px;}
一般兄弟結合子(General sibling combinator)
- 構文
- E ~ F
- 説明
- 同じ階層に属する別の要素を兄弟とみなして、先に書かれたセレクタの後に続く要素をチルダ(~)で区切って選択します。
- 用例
- h2 ~ h3 { border-bottom: 1px solid #ccc;}
隣接兄弟結合子(Adjacent sibling combinator)
- 構文
- E + F
- 説明
- 同じ階層に配置された要素と隣接するものを加算記号(+)で区切って選択します。
- 用例
- h2 + p { margin-top: 0; }
カラム結合子(Column combinator)
- 構文
- E || F
- 説明
- 同じ列に所属する要素を縦線記号(||)で区切って選択します。
- 用例
- col || td { background: #eeeeee; }
疑似クラス(Pseudo classes)
:root疑似クラス
- 構文
- :root
- 説明
- ドキュメントのルートにあたる要素を選択します。HTML文書であればhtml要素が対象となります。
- 用例
- :root { background: #000; color: #fff;}
:first-child疑似クラス
- 構文
- E:first-child
- 説明
- 親要素の中で最初に置かれたE要素を選択します。
- 用例
- .tr:first-child { background: #eee; }
:last-child疑似クラス
- 構文
- E:last-child
- 説明
- 親要素の中で最後に置かれたE要素を選択します。
- 用例
- #footer:last-child { font-size: 0.8em; }
:nth-child疑似クラス
- 構文
- E:nth-child(n)
- 説明
- 親要素の中で(n番目)に置かれたE要素を選択します。
- 用例
- .toc li:nth-child(odd) { background: #e1f5fc; }
:nth-last-child疑似クラス
- 構文
- E:nth-last-child(n)
- 説明
- 親要素の中で最後から(n番目)に置かれたE要素を選択します。
- 用例
- .rank div:nth-last-child(5) { border-bottom: 1px solid #666; }
:first-of-type疑似クラス
- 構文
- E:first-of-type
- 説明
- 同じ階層に属する同一のセレクタの中から先頭に置かれた要素のみを選択します。
- 用例
- article h2:first-of-type { border-left: 3px solid aqua; }
:last-of-type疑似クラス
- 構文
- E:last-of-type
- 説明
- 同じ階層に属する同一のセレクタの中から最後に置かれた要素のみを選択します。
- 用例
- section p:last-of-type { margin: 0; }
:nth-of-type疑似クラス
- 構文
- E:nth-of-type(n)
- 説明
- 同じ階層に属する同一のセレクタの中で先頭から(n番目)に置かれた要素のみを選択します。
- 用例
- .sidebar div:nth-of-type(3) { text-align: center; }
:nth-last-of-type疑似クラス
- 構文
- E:nth-last-of-type(n)
- 説明
- 同じ階層に属する同一のセレクタの中で最後から(n番目)に置かれた要素のみを選択します。
- 用例
- .sidebar div:nth-of-type(3) { text-align: center; }
:only-child疑似クラス
- 構文
- E:only-child
- 説明
- セレクタが親要素に含まれる唯一の要素だった場合に選択します。
- 用例
- header h1:only-child { border-bottom: 1px solid #000; }
:only-of-type疑似クラス
- 構文
- E:only-of-type
- 説明
- セレクタが属する親要素の中で同類の型が存在しない場合に選択します。
- 用例
- p em:only-of-type { color: #0000cc; }
:empty疑似クラス
- 構文
- E:empty
- 説明
- 要素の内容が空であった場合に選択します。
- 用例
- p:empty { margin: 0; }
:link疑似クラス
- 構文
- E:link
- 説明
- リンク先が未訪問であるE要素を選択します。
- 用例
- a:link { text-decoration: underline; }
:visited疑似クラス
- 構文
- E:visited
- 説明
- リンク先が訪問済みであるE要素を選択します。
- 用例
- a:visited { color: #a234d1; }
:hover疑似クラス
- 構文
- E:hover
- 説明
- リンク要素の上にカーソルが重なった場合に選択します。
- 用例
- a:hover { text-decoration: none; }
:active疑似クラス
- 構文
- E:active
- 説明
- リンクされた要素がクリックされた場合に選択します。
- 用例
- a:active { color: #ff0000; }
:focus疑似クラス
- 構文
- E:focus
- 説明
- その要素がフォーカスされた状態である場合に選択します。
- 用例
- input:focus { border-color: #83befc; }
:target疑似クラス
- 構文
- E:target
- 説明
- リンク先のターゲットに指定された要素を選択します。
- 用例
- p:target { text-decoration: underline wavy #ff0; }
:lang疑似クラス
- 構文
- E:lang()
- 説明
- 要素に与えられた言語情報の値と一致する場合に選択します。
- 用例
- p:lang(ja) { font-family: serif; }
:enabled疑似クラス
- 構文
- E:enabled
- 説明
- その要素が有効状態(enabled)である場合に選択します。
- 用例
- input[type="text"]:enabled { background: #fff; }
:disabled疑似クラス
- 構文
- E:disabled
- 説明
- その要素が無効状態(disabled)である場合に選択します。
- 用例
- input[type="text"]:disabled { color: #999; }
:checked疑似クラス
- 構文
- E:checked
- 説明
- その要素がチェック状態である場合に選択します。
- 用例
- input[type="radio"]:checked + label { color: #00f; }
:not疑似クラス
- 構文
- E:not(F)
- 説明
- 条件Fを含まないE要素を選択します。この擬似クラスには以下の特徴があります。
- :not擬似クラスは入れ子にできません。
- :not擬似クラスの中で疑似要素を扱うことはできません。
- :not擬似クラスは詳細度・特異性を上げることがあります。例えば、.hoge:not(.one)は単純な.hogeと同じクラスを選択しますが、より詳細度の高い選択とみなされます。
- :not(.hoge)は.hoge以外の全ての要素を選択するため、<html>などの意図しない要素にも影響を及ぼします。
- :not(.one, .two)のように複数のセレクタを同時に指定する場合、動作の保証は得られません。代わりに:not(.one):not(.two)と分けて記述しましょう。
- 用例
- li:not(:last-of-type){ border-bottom: 1px solid #ccc; }
疑似要素(Pseudo elements)
::before疑似要素
- 構文
- E::before
- 説明
- E要素の直前に生成される内容を選択します。
- 用例
- .data a::before { content:"・"; }
::after疑似要素
- 構文
- E::after
- 説明
- E要素の直後に生成される内容を選択します。
- 用例
- hr::after { content:"※ ※ ※ ※ ※"; }
::first-line疑似要素
- 構文
- E::first-line
- 説明
- E要素の最初の一行のみを選択します。最初の行の長さは要素の幅や文字の大きさによります。
- 用例
- .info::first-line { text-decoration: underline #999; }
::first-letter疑似要素
- 構文
- E::first-letter
- 説明
- E要素の最初の一文字のみを選択します。
- 用例
- p::first-letter { text-indent: 1em; }
CSSリファレンス一覧