CSS 擬似クラス

:link

全てのリンク

:visited

訪問済みリンク

:active

リンクのクリック中

:hover

マウスがリンクに乗っている時

:focus

タブキーなどでその要素がフォーカスされた時

:first-child

要素の最初の子要素を指定

ul li:first-child { color: red; }

<ul>
  <li>ここが適用される
  <li>要素
  <li>要素
  <li>要素
</ul>

:last-child

要素の最後の子要素を指定

ul li:last-child { color: red; }

<ul>
  <li>要素
  <li>要素
  <li>要素
  <li>ここが適用される
</ul>

:first-of-type, :last-of-type

最初の要素を指定、最後の要素を指定（指定した種類の子要素の中で）

:nth-child(n), :nth-last-child(n)

最初から何番目の要素、最後から何番目の要素を指定（どの要素でも関係なくカウント）

section p:nth-child(4) { background-color: red; }

<seciton>
  <p>段落1
  <p>段落2
  <p>段落3</p>
  <pre>その他の要素のコンテンツ</pre><!-- 4番目であるここが参照されるがpではないため適用されない -->
  <p>段落4
  <p>段落5
</section>

:nth-of-type(n), :nth-last-of-type(n)

最初から何番目の要素、最後から何番目の要素を指定（指定した要素のみをカウント）

section p:nth-of-type(4) { background-color: red; }

<seciton>
  <p>段落1
  <p>段落2
  <p>段落3</p>
  <pre>その他の要素のコンテンツ</pre>
  <p>段落4 <!-- p要素のみで４番目のここが適用される -->
  <p>段落5
</section>

:only-child

兄弟要素を持たない子要素を指定

ul li:only-child { background-color: red; }

<ul>
  <li>一人っ子 <!-- ここが適用される -->
</ul>

<ul>
  <li>長男
  <li>次男
  <li>三男
</ul>

<ul>
  <li>長女
  <li>次女
  <li>三女
</ul>

:only-of-type

同じ要素の兄弟がひとつもない要素を指定

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

<section>
  <p>一人っ子のp君
  <span>一人っ子のspan君</span> <!-- ここが適用される -->
</section>

<section>
  <p>長男p
  <p>次男p
  <span>兄span</span>
  <span>弟span</span>
</section>

<section>
  <p>長男p
  <p>次男p
  <p>三男p
  <span>span君</span> <!-- ここが適用される -->
</section>

:empty

子要素を持たない要素

:target

フラグメント識別子（id,name属性値）を持っているリンクでターゲット対象にされた要素を指定

div:target { background-color: red; }

<a href="#prof">プロフィール</a>
↓
<div id="prof>
ここに適用される
:

:enabled,:disabled

真偽値が設定されている要素を指定

not(セレクタ)

反転した指定
not(.column) { }の場合class="column"が付かない要素に対してスタイルが効く