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要素を選択

グルーピング・セレクタ

構文 名称 説明
E, F セレクタ・リスト E要素とF要素を選択
E F 子孫結合子 E要素の子孫であるF要素を選択
E > F 子結合子 E要素の子であるF要素を選択
E ~ F 一般兄弟結合子 E要素の後に配置されたF要素を選択
E + F 隣接兄弟結合子 E要素の直後にあるF要素を選択
E || F カラム結合子 同じ列に所属する要素を選択

疑似クラス

構文 名称 説明
:root :root疑似クラス ドキュメントのルートにあたる要素を選択
E:first-child :first-child疑似クラス 親要素の中で最初に置かれたE要素を選択
E:last-child :last-child疑似クラス 親要素の中で最後に置かれたE要素を選択
E:nth-child(n) :nth-child疑似クラス 親要素の中で(n番目)に置かれたE要素を選択
E:nth-last-child(n) :nth-last-child疑似クラス 親要素の中で最後から(n番目)のE要素を選択
E:first-of-type :first-of-type疑似クラス 兄弟関係にあたるE要素の最初のE要素のみを選択
E:last-of-type :last-of-type疑似クラス 兄弟関係にあたるE要素の最後のE要素のみを選択
E:nth-of-type(n) :nth-of-type疑似クラス 兄弟関係にあたるE要素の先頭から(n番目)のE要素を選択
E:nth-last-of-type(n) :nth-last-of-type疑似クラス 兄弟関係にあたるE要素の最後から(n番目)のE要素を選択
E:only-child :only-child疑似クラス 親要素の中で子要素がE要素のみの場合を選択
E:only-of-type :only-of-type疑似クラス 親要素の中で唯一のE要素を選択
E:empty :empty疑似クラス E要素の内容が空の場合に選択
E:link :link擬似クラス リンク先が未訪問であるE要素を選択
E:visited :visited擬似クラス リンク先が訪問済みであるE要素を選択
E:hover :hover疑似クラス リンクの上にカーソルが重なった場合に選択
E:active :active疑似クラス リンクがクリックされた場合に選択
E:focus :focus疑似クラス 要素がフォーカスされた状態を選択
E:target :target擬似クラス リンク先のターゲットに指定された要素を選択
E:lang() :lang擬似クラス 言語情報の値を選択
E:enabled :enabled擬似クラス E要素が有効状態(enabled)である場合に選択
E:disabled :disabled擬似クラス E要素が無効状態(disabled)である場合に選択
E:checked :checked擬似クラス E要素がチェック状態である場合に選択
E:not(F) :not擬似クラス 条件Fを含まないE要素を選択

疑似要素

構文 名称 説明
E::before ::before疑似要素 E要素の直前に生成される内容を選択
E::after ::after疑似要素 E要素の直後に生成される内容を選択
E::first-line ::first-line疑似要素 E要素の最初の一行のみマッチ
E::first-letter ::first-letter疑似要素 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; }
構文
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リファレンス

CSSって何? 初めての方でも分かる超基礎知識を解説します
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます