【2019年】主要ブラウザで対応済みの擬似クラス、擬似要素まとめ【今使えるもの】

この記事で紹介する擬似クラスや擬似要素は、モバイル版含め主要ブラウザのほとんどでサポートされているものに限ります。例えば、Chrome や Safari で対応していても、Edge で対応していないものは紹介しません。ただし、主要ブラウザのうちIEのみ非対応の場合は、その旨を明記した上で紹介します。

擬似クラスと擬似要素の違いとは？（区別する理由）

擬似クラスと擬似要素は、それぞれ :擬似クラス名、::擬似要素名 という使われ方をするので、見た目の違いはすぐに分かります。しかし、どんな特徴の違いがあって、それぞれに区別されているのでしょうか？

まず、擬似クラスですが、名前のとおり、擬似的なクラスという性質を持ちます。HTMLのクラスはHTMLの要素に付加されるものであり、要素の所属するグループを表すものです。CSSは、クラス名を指定すると、そのクラスに所属している要素が全て選ばれます。擬似クラスもクラスなので、該当した要素が選ばれます。しかし擬似クラスは、通常のクラスとは異なり、要素の状態によって選ばれる特殊なクラスです。ですので、その特殊性を「擬似」という言葉を使い「擬似クラス」としているのです。

では、擬似要素はどうでしょうか？擬似要素は、擬似クラスとは異なり、要素が選ばれるわけではありません。むしろ、擬似要素自体が要素のような役割を果たします。

例えば、::selection 擬似要素は、ユーザーが 選択した文書の一部を選択しますが、もし ::selection を擬似クラスとして扱うならば、文書の要素全体が選択されるという考えになります。これは意図に反します。

「擬似要素」を要素として扱うのは、元の要素とは別の実態と捉えるからです。そしてそれは、通常の要素ではなく、特殊な要素であるため「擬似」という言葉を使って「擬似要素」としているわけです。

擬似クラスの一覧

擬似クラスは、CSSのセレクターに付加するキーワードで、要素の状態に基づいてスタイル付けを行うためのものです。擬似クラスは、（:キーワード）または（:キーワード(引数)）という形で使用します。また、通常のクラスと同じように、セレクター内では複数の擬似クラスを使用することもできます。

:active

:active は、<a> または <button> において、ユーザによってアクティブ化されている状態を指します。

a:active {
  font-weight: bold;
}

:checked

:checked は、ラジオボタン（<input type="radio">）、チェックボックス（<input type="checkbox">）、オプションボタン（<select> の中の <option>）要素がチェックされていたり on の状態にあったりすることを指します。

input[type="radio"]:checked {
  font-weight: bold;
}

:disabled

:disabled は、無効な要素を指します。アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。:enabled とは対となる擬似クラスです。

input:disabled {
  color: gray;
}

:empty

:empty は、子を持たない要素を指します。

.box:empty {
  display: none;
}

:enabled

:enabled は、有効な要素を表します。有効な要素とは、アクティブ化（選択、クリック、入力）したりフォーカスしたりすることができるものです。:disabled とは対となる擬似クラスです。

input:enabled {
  color: green;
}

:first-child

:first-child は、兄弟要素のグループの中で最初の要素を指します。

<style>
  p { 
    color: black;
  }
  p:first-child {
    color: red;
  }
</style>
<div>
  <p>このテキストは赤色になります。</p>
  <p>このテキストは黒色のままです。</p>
</div>

:first-of-type

:first-of-type は、兄弟要素のグループの中でその種類の最初の要素を指します。

<style>
  p:first-of-type {
    font-style: italic;
  }
</style>
<section>
  <h1>イントロダクション</h1>
  <p>最初の段落。</p><!-- イタリック体になる -->
  <p>2番目の段落</p>
  <button>続きを読む</button>
</section>

:focus

:focus は、フォーカスを持っている要素を指します。

input:focus {
  color: red;
}

:hover

:hover は、カーソルが要素の上にある状態（ホバー）を指します。

.hoverable:hover {
  box-shadow: 0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)!important;
}

:indeterminate

:indeterminate は、中間の状態にある要素を指します。

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
}

:in-range

:in-range は、現在の値が min および max の範囲内である <input> 要素を指します。:out-of-range のとは対となる擬似クラスです。

input:in-range {
  background-color: palegreen;
}

:invalid

:invalid は、内容の検証に失敗した <input> 要素を指します。:valid とは対となる擬似クラスです。

input:invalid {
  background-color: pink;
}

:lang(language-code)

:lang() は、要素を引数で指定された言語に基づいて選択します。

<style>
  :lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
  :lang(fr) > q { quotes: '« ' ' »'; }
  :lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
</style>
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

:last-child

:last-child は、兄弟要素のグループの中で最後の要素を指します。

<style>
  p {
    color: black;
  }
  p:last-child {
    color: red;
  }
</style>
<div>
  <p>このテキストは黒色のままです。</p>
  <p>このテキストは赤色に変わります。</p>
</div>

:last-of-type

:last-of-type は、兄弟要素のグループの中でその種類の最後の要素を指します。

<style>
  p:last-of-type {
    font-style: italic;
  }
</style>
<section>
  <h1>イントロダクション</h1>
  <p>最初の段落。</p>
  <p>2番目の段落</p><!-- イタリック体になる -->
  <button>続きを読む</button>
</section>

:link

:link は、まだ訪問されていない要素を指します。

a:link {
  color: royalblue;
}

:not()

:not() は、列挙されたセレクターに一致しない要素を指します。

<style>
  section :not(h1) {
    font-style: italic;
  }
</style>
<section>
  <h1>イントロダクション</h1>
  <p>最初の段落。</p><!-- イタリック体になる -->
  <p>2番目の段落</p><!-- イタリック体になる -->
  <button>続きを読む</button><!-- イタリック体になる -->
</section>

:nth-child(arg)

:nth-child() は、兄弟要素のグループの中で、引数に基づいた位置を最初から順に選択します。引数は次のように指定できます。

• キーワード指定: odd （帰趨番目の要素）または even（偶数番目の要素）
• 関数指定: <An+B> の形式。例えば、3の倍数に位置する要素は、3n と表せる。

:nth-child(5n+1) {
  /* ... */
}

:nth-last-child(arg)

:nth-last-child() は、兄弟要素のグループの中で、引数に基づいた位置を最後から順に選択します。:nth-child() とは、最後から最前に向けて数えるという点以外は同じです。

tr:nth-last-child(-n+3) {
  /* ... */
}

:nth-of-type(arg)

:nth-of-type() は、兄弟要素のグループの中で指定された型の要素を、引数に基づいた位置を最初から順に選択します。引数は、次のように指定します。

• キーワード指定: odd （帰趨番目の要素）または even（偶数番目の要素）
• 関数指定: <An+B> の形式。例えば、3の倍数に位置する要素は、3n と表せる。

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,0.05);
}

:nth-last-of-type(arg)

:nth-last-of-type() は、兄弟要素のグループの中で指定された型の要素を、引数に基づいた位置を最後から順に選択します。:nth-of-type() とは、最後から最前に向けて数えるという点以外は同じです。

:only-child

:only-child は、兄弟要素がない要素を指します。

:only-of-type

:only-of-type は、同じ型の兄弟要素がない要素を指します。

:optional

:optional は、required 属性が指定されていない <input>, <select>, <textarea> を指します。:required とは対となる擬似クラスです。

:out-of-range

:out-of-range は、現在の値が min および max の範囲外である <input> 要素を指します。:in-range とは対となる擬似クラスです。

:read-only

:read-only は、ユーザーが編集できない要素（ロックされた入力欄など）を指します。

:read-write

:read-write は、ユーザーが編集できる要素を表します。

:required

:required は、 required 属性が設定されてる <input>, <select>, <textarea> 要素を表します。:optional とは対となる擬似クラスです。

:root

:root は、文書を表すルートを要素を指します。HTMLでは、<html> がルート要素です。ただし、:root は html セレクタと完全に同じではなく、:root の方が詳細度が高いという点で異なります。

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

:target

:target は、現在のURLのフラグメント（「#」に続く値）に一致するIDを持つ要素を指します。

:valid

:invalid は、内容の検証に成功した <input> 要素を指します。:invalid とは対となる擬似クラスです。

:visited

:visited は、ユーザーが既に訪問したリンク要素を指します。

a:visited {
  color: ｐurple;
}

擬似要素の一覧

擬似要素は、CSSのセレクターに付加するキーワードで、要素の特定の部分にスタイル付けを行うためのものです。擬似要素は、（::キーワード）という形で使用します。

::after

::after は、選択した要素の最後の子要素を擬似的に作成します。

::before

::before は、選択した要素の最初の子要素を擬似的に作成します。

.fa-clock::before {
  content: "\f017";
}

::first-letter

::first-letter は、ブロックレベル要素の最初の行の最初の文字を選択します。

.has-drop-cap:not(:focus):first-letter {
  float: left;
  font-size: 8.4em;
  line-height: .68;
  font-weight: 100;
  margin: .05em .1em 0 0;
  text-transform: uppercase;
  font-style: normal;
}

::first-line

::first-line は、ブロックレベル要素の最初の行を選択します。

::selection

::selection は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部を選択します。