サンプル付きCSSセレクタ47種

idで選ぶ（idセレクタ）

HTMLのid属性値で選ぶには「#」を付けます。

idを名指しするので1つの要素だけが選ばれます。

優先度が高いセレクタなので、スタイルが競合した場合は基本的に適用されます。

#englion { color:red ; }

	<div id="englion">選ばれる</div>
	<div id="lion">選ばれない</div>

classで選ぶ（クラスセレクタ）

HTMLのclass属性値で選ぶには「.」(ドット)を付けます。

利用頻度の高いセレクタです。

.englion { color:red ; }

	<div class="englion">選ばれる</div>
	<div id="englion">選ばれない</div>
	<div class="lion">選ばれない</div>
	<div class="englion">選ばれる</div>

HTMLの要素名で選ぶ（タイプセレクタ）

HTML要素で選ぶには要素名をそのまま書きます。このセレクタにはidやclass属性は関係ありません。

div { color:red ; }

<div id="englion">選ばれる</div>
<span class="englion">選ばれない</span>
<div class="englion">選ばれる</div>

全要素を選ぶ（ユニバーサルセレクタ）

全ての要素を選ぶには「*」を使います。

* { color:red ; }

<h1>選ばれる</h1>
<span>選ばれる</span>
<div>選ばれる</div>

セレクタのグループ化

セレクタをグループ化するにはカンマで区切ります。

セレクタのグループ化は、複数の要素に同じスタイルを適用したい場合に便利です。

h1,div { color:red ; }

<h1>選ばれる</h1>
<span>選ばれない</span>
<div>選ばれる</div>

除外する

除外するには「:not(除外するセレクタ)」を付けます。

p:not(.a) { color:red ; }

<p>選ばれる</p>
<p class="a">選ばれない</p>
<p>選ばれる</p>

親要素を条件にする

親要素を条件にするには「親要素 >」を付けます。

サンプルコードのセレクタでは、divを親に持つstrongが選ばれます。このセレクタには親以上の親、つまり先祖要素は関係ありません。

見方を変えると、divの（孫ではなく）子であるstrongが選ばれるともいえます。

div > strong { color:red ; }

<div>親
  <strong>選ばれる</strong>
  <span>
    <strong>孫は選ばれない</strong>
  </span>
  <strong>子は全て選ばれる</strong>
</div>

先祖要素を条件にする

先祖要素を条件にするには前にスペースを空けて先祖要素を指定します。

サンプルコードのセレクタでは、先祖にdivを持つstrongが選ばれます。

見方を変えると、divの子孫であるstrongが選ばれるともいえます。

div strong { color:red ; }

<div>先祖
  <span>
    <strong>親に関係なく孫は選ばれる</strong>
  </span>
  <strong>子も選ばれる</strong>
</div>

直前の要素を条件にする

直前の要素を条件にするには「直前の要素 +」を付けます。

サンプルコードのセレクタでは、直前の要素がbであるstrongが選ばれます。

見方を変えると、bの直後にあるstrongが選ばれるともいえます。

b + strong { color:red ; }

<strong>選ばれない</strong>
<b>直前</b>
<strong>選ばれる</strong>
<strong>選ばれない</strong>

兄要素を条件にする

兄要素を条件にするには「兄要素 ~」を付けます。

サンプルコードのセレクタでは、兄要素にbを持つstrongが選ばれます。

見方を変えると、b以降のstrongが選ばれるともいえます。

b ~ strong { color:red ; }

<strong>選ばれない</strong>
<b>兄</b>
<strong>選ばれる</strong>
<span>選ばれない</span>
<strong>直後でなくても選ばれる</strong>
<p>
  <strong>甥は選ばれない</strong>
</p>

属性名で選ぶ

属性名で選ぶには「[属性名]」とします。

サンプルコードのセレクタでは、title属性を持つ要素が選ばれます。このセレクタに属性値は関係ありません。

[title] { color:red ; }

<p title="値は関係ない">選ばれる</p>
<p>選ばれない</p>

属性と値で選ぶ

属性と値で選ぶには「[属性名=値]」とします。

サンプルコードのセレクタでは、title属性値が「red」の要素が選ばれます。

[title=red] { color:red ; }

<p title="reds">選ばれない</p>
<p title="red">選ばれる</p>

スペース区切りの属性値で選ぶ

スペース区切りの属性値リストに含まれる単語で選ぶには「[属性名~=単語]」とします。

サンプルコードのセレクタでは、title属性値のリストに「red」が含まれる要素が選ばれます。

[title~=red] { color:red ; }

<p title="blue red">選ばれる</p>
<p title="red">単体でも選ばれる</p>
<p title="blue red-pink">選ばれない</p>

ハイフン区切りの属性値の先頭で選ぶ

ハイフン区切りの属性値リストの先頭の単語で選ぶには「[属性名|=単語]」とします。

サンプルコードのセレクタでは、title属性値のリストが「red」で始まる要素が選ばれます。

[title|=red] { color:red ; }

<p title="red-blue">選ばれる</p>
<p title="red">単体でも選ばれる</p>
<p title="blue-red">選ばれない</p>

このセレクタは主にlang属性に対して使います。lang属性の値にはよくハイフンが含まれるためです。

属性値の先頭文字列で選ぶ

属性値の先頭文字列で選ぶには「[属性名^=先頭文字列]」とします。

サンプルコードのセレクタでは、title属性値が「red」で始まる要素が選ばれます。

[title^=red] { color:red ; }

<p title="redd">選ばれる</p>
<p title="ared">選ばれない</p>

属性値の末尾文字列で選ぶ

属性値の末尾文字列で選ぶには「[属性名$=末尾文字列]」とします。

サンプルコードのセレクタでは、title属性値が「red」で終わる要素が選ばれます。

[title$=red] { color:red ; }

<p title="ared">選ばれる</p>
<p title="redd">選ばれない</p>

属性値に含まれる文字列で選ぶ

属性値に含まれる文字列で選ぶには「[属性名*=文字列]」とします。このセレクタは文字列の位置は関係ありません。

サンプルコードのセレクタでは、title属性値に「red」が含まれる要素が選ばれます。

[title*=red] { color:red ; }

<p title="aredd">選ばれる</p>
<p title="reed">選ばれない</p>

最初の要素を選ぶ

最初の要素を選ぶには「:first-child」を付けます。

サンプルコードの下では、同階層でb要素が最初の要素なのでspan要素は選ばれません。

span:first-child { color:red ; }

<div>
  <span>選ばれる</span>
  <span>選ばれない</span>
  <span>選ばれない</span>
</div>

<div>
  <b>選ばれない</b>
  <span>選ばれない</span>
  <span>選ばれない</span>
  <span>選ばれない</span>
</div>

最後の要素を選ぶ

最後の要素を選ぶには「:last-child」を付けます。

span:last-child { color:red ; }

<div>
  <span>選ばれない</span>
  <span>選ばれない</span>
  <span>選ばれる</span>
</div>

N番目の要素を選ぶ

順番を指定するには「:nth-child(順番)」を付けます。例えば2番目の要素を選ぶには「:nth-of-type(2)」とします。2th-of-typeということです。

span:nth-child(2) { color:red ; }

<div>
  <span>選ばれない</span>
  <span>選ばれる</span>
  <span>選ばれない</span>
  <span>選ばれない</span>
</div>

後ろからN番目の要素を選ぶ

順番を後ろから数えて指定するには「:nth-last-child(順番)」を付けます。

span:nth-last-child(2) { color:red ; }

<div>
  <span>選ばれない</span>
  <span>選ばれない</span>
  <span>選ばれる</span>
  <span>選ばれない</span>
</div>

1つなら選ぶ

同階層で1つだけの要素を選ぶには「:only-child」を付けます。

span:only-child { color:red ; }

<div>
  <span>選ばれない</span>
  <span>選ばれない</span>
</div>

<div>
  <span>選ばれる</span>
</div>

最初の選択要素を選ぶ

最初にある選択要素型を選ぶには「:first-of-type」を付けます。

サンプルコードのセレクタでは、各階層のspan要素のうち、最初のspan要素だけ選ばれます。

span:first-of-type { color:red ; }

<div>
  <span>選ばれる</span>
  <span>選ばれない</span>
  <span>選ばれない</span>
</div>
<div>
  <b>選ばれない</b>
  <span>選ばれる</span>
  <span>選ばれない</span>
</div>

first-of-typeとfirst-childの違いは「同階層で最初の要素」なのか「同階層の選択要素内で最初の要素」なのかという点です。

最後の選択要素を選ぶ

最後の選択要素型を選ぶには「:last-of-type」を付けます。

span:last-of-type { color:red ; }

<div>
  <span>選ばれない</span>
  <span>選ばれない</span>
  <span>選ばれる</span>
</div>

N番目の選択要素を選ぶ

順番を指定するには「:nth-of-type(順番)」を付けます。

span:nth-of-type(2) { color:red ; }

<div>
  <span>選ばれない</span>
  <span>選ばれる</span>
  <span>選ばれない</span>
  <span>選ばれない</span>
</div>

後ろからN番目の選択要素を選ぶ

順番を後ろから数えて指定するには「:nth-last-of-type(順番)」を付けます。

span:nth-last-of-type(2) { color:red ; }

<div>
  <span>選ばれない</span>
  <span>選ばれない</span>
  <span>選ばれる</span>
  <span>選ばれない</span>
</div>

選択要素が1つなら選ぶ

同階層で1つだけの選択要素を選ぶには「:only-of-type」を付けます。

span:only-of-type { color:red ; }

<div>
  <span>選ばれない</span>
  <span>選ばれない</span>
</div>

<div>
  <b>選ばれない</b>
  <span>選ばれる</span>
</div>

未訪問を選ぶ

未訪問のリンク要素を選ぶには「:link」を付けます。

サンプルコードのセレクタでは「selector」（このページ）は訪問済みなので選ばれず、「undefined」は未訪問なので選ばれます。ブラウザが訪問ページを記憶しています。

a:link { color:red ; }

<a href="selector">選ばれない</a>
<a href="undefined">選ばれる</a>

訪問済を選ぶ

訪問済のリンク要素を選ぶには「:visited」を付けます。

a:visited { color:red ; }

<a href="selector">選ばれる</a>
<a href="undefined">選ばれない</a>

カーソル下を選ぶ

マウスポインタの下にあるリンク要素を選ぶには「:hover」を付けます。

a.red:hover { color:red ; }

<a class="red" href="selector">マウスオーバーで選ばれる</a>
<a href="selector">選ばれない</a>

マウスオーバーで選ばれる
選ばれない

クリック中を選ぶ

クリックや右クリックされている要素を選ぶには「:active」を付けます。

サンプルコードのセレクタではstrongタグに付けていますが、ふつうはリンク要素に使います。

strong:active { color:red ; font-size:200% ; }

<strong>クリック</strong>

checkedを選ぶ

チェックされている要素を選ぶには「:checked」を付けます。ユーザが選べるタイプのinput要素に使います。

サンプルコードのセレクタでは、チェック要素の直後のb要素が選ばれます。

input:checked+b { color:red ; }

<input type="checkbox"><b>選ばれない</b>
<input type="checkbox" checked><b>選ばれる</b>

フォーカスを選ぶ

フォーカスが当たっている要素を選ぶには「:focus」を付けます。

input:focus { color:red ; }

<input type="text" vlaue="フォーカスが当たると選ばれる">

範囲内を選ぶ

入力値が範囲内の要素を選ぶには「:in-range」を付けます。

input:in-range { color:red ; }

<input type="number" max="8" min="4">

範囲外を選ぶ

入力値が範囲外の要素を選ぶには「:out-of-range」を付けます。

input:out-of-range { color:red ; }

<input type="number" max="8" min="4">

適正値を選ぶ

入力値が適正な要素を選ぶには「:valid」を付けます。input要素によるフォーマットに従っていると選ばれます。

input:valid { color:red ; }

<input type="url">

不正値を選ぶ

入力値が不正な要素を選ぶには「:invalid」を付けます。

input:invalid { color:red ; }

<input type="url">

disabledを選ぶ

disabled属性が設定されている要素を選ぶには「:disabled」を付けます。disabled属性は入力要素を無効にします。

input:disabled { color:red ; }

<input type="text" value="選ばれない">
<input type="text" vlaue="選ばれる" disabled>
<input type="text" value="選ばれない">

非disabledを選ぶ

disabled属性が設定されている要素以外の要素を選ぶには「:enabled」を付けます。

input:enabled { color:red ; }

<input type="text" value="選ばれる">
<input type="text" vlaue="選ばれない" disabled>
<input type="text" value="選ばれる">

readonlyを選ぶ

readonly属性が設定されている要素を選ぶには「:read-only」を付けます。radonly属性は入力要素を読み込み専用にして書き込みを禁止します。

input:read-only { color:red ; }

<input type="text" value="選ばれない">
<input type="text" value="選ばれる" readonly>

非readonlyを選ぶ

readonly属性が設定されていない要素を選ぶには「:read-write」を付けます。

input:invalid { color:red ; }

<input type="text" value="選ばれる">
<input type="text" value="選ばれない" readonly>

requiredを選ぶ

required属性が設定されている要素を選ぶには「:required」を付けます。requiredは入力必須項目を示します。

input:required { color:red ; }

<input type="text" value="選ばれない">
<input type="text" value="選ばれる" required>

非requiredを選ぶ

required属性が設定されていない要素を選ぶには「:optional」を付けます。

input:optional { color:red ; }

<input type="text" value="選ばれる">
<input type="text" value="選ばれない" required>

ルートを選ぶ

ドキュメントのツリー上のルート要素を選ぶには「:root」を付けます。HTMLドキュメントではhtml要素が選ばれます。

HTML専用のCSSではあまり使いません。

:root { color:red ; }

<html>選ばれる</html>

lang属性値で選ぶ

lang属性値で選ぶには「:lang(値)」を付けます。日本語は「:lang(ja)」です。

:lang(ja) { color:red ; }

<p lang="it">Non sono scelto</p>
<p lang="ja">選ばれる</p>
<p lang="de">Nicht ausgewählt</p>

空要素を選ぶ

テキストや子要素を持たない空要素を選ぶには「:empty」を付けます。

サンプルコードのセレクタでは、空のspan要素の直後のb要素が選ばれます。

span:empty+b { color:red ; }

<span></span><b>選ばれる</b>
<span>選ばれ</span><b>ない</b>

#付きリンク先を選ぶ

#付きのページ内リンク先の要素を選ぶには「:target」を付けます。クリック後URLに#idが付くと選ばれます。

:target { color:red ; }

<a href="#red">クリック</a>

<span id="red">選ばれる</span>