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

2019年現在、主要なブラウザで対応されていて十分使用可能なCSS擬似クラス、擬似要素のまとめです。

実験的な機能やサポートが不十分なものには触れず、「今使える」ものをまとめています。

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

擬似クラスと擬似要素の違いとは?(区別する理由)

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


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


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

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

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

擬似クラスの一覧

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

:active

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

アクティブ化されている <a> をすべて太字にする
  1. a:active {
  2. font-weight: bold;
  3. }

:checked

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

チェックされているラジオボタンを太字にする
  1. input[type="radio"]:checked {
  2. font-weight: bold;
  3. }

:disabled

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

無効な<input> の色をグレーにする
  1. input:disabled {
  2. color: gray;
  3. }

:empty

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

子を持たない .box を非表示にする
  1. .box:empty {
  2. display: none;
  3. }

:enabled

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

有効な <input> を緑色にする
  1. input:enabled {
  2. color: green;
  3. }

:first-child

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

  1. <style>
  2. p {
  3. color: black;
  4. }
  5. p:first-child {
  6. color: red;
  7. }
  8. </style>
  9. <div>
  10. <p>このテキストは赤色になります。</p>
  11. <p>このテキストは黒色のままです。</p>
  12. </div>

:first-of-type

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

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

:focus

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

フォーカスを持つ <input> を赤色にする
  1. input:focus {
  2. color: red;
  3. }

:hover

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

シャドーエフェクト
  1. .hoverable:hover {
  2. box-shadow: 0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19)!important;
  3. }

:indeterminate

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

<progress> が value を持たないとき
  1. progress:indeterminate {
  2. opacity: 0.5;
  3. background-color: lightgray;
  4. }

:in-range

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

<input> の値が範囲内であるときに背景色を緑色にする
  1. input:in-range {
  2. background-color: palegreen;
  3. }

:invalid

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

無効な入力を目立たせる
  1. input:invalid {
  2. background-color: pink;
  3. }

:lang(language-code)

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

言語ごとの引用符を指定する
  1. <style>
  2. :lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
  3. :lang(fr) > q { quotes: '« ' ' »'; }
  4. :lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
  5. </style>
  6. <div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
  7. <div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
  8. <div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

:last-child

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

  1. <style>
  2. p {
  3. color: black;
  4. }
  5. p:last-child {
  6. color: red;
  7. }
  8. </style>
  9. <div>
  10. <p>このテキストは黒色のままです。</p>
  11. <p>このテキストは赤色に変わります。</p>
  12. </div>

:last-of-type

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

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

:link

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

未訪問の <a> をすべて青色にする
  1. a:link {
  2. color: royalblue;
  3. }

:not()

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

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

:nth-child(arg)

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

  • キーワード指定: odd (帰趨番目の要素)または even(偶数番目の要素)
  • 関数指定: <An+B> の形式。例えば、3の倍数に位置する要素は、3n と表せる。
兄弟要素の中で4つおきに選択する
  1. :nth-child(5n+1) {
  2. /* ... */
  3. }

:nth-last-child(arg)

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

最後の3つの <tr> を選択
  1. tr:nth-last-child(-n+3) {
  2. /* ... */
  3. }

:nth-of-type(arg)

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

  • キーワード指定: odd (帰趨番目の要素)または even(偶数番目の要素)
  • 関数指定: <An+B> の形式。例えば、3の倍数に位置する要素は、3n と表せる。
テーブルをストライプにする
  1. .table-striped tbody tr:nth-of-type(odd) {
  2. background-color: rgba(0,0,0,0.05);
  3. }

: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> がルート要素です。ただし、:roothtml セレクタと完全に同じではなく、:root の方が詳細度が高いという点で異なります。

ドキュメント全体で使用できる色の定義
  1. :root {
  2. --primary-color: #007bff;
  3. --secondary-color: #6c757d;
  4. }

:target

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

:valid

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

:visited

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

訪問済みの <a> をすべて紫色にする
  1. a:visited {
  2. color: urple;
  3. }

擬似要素の一覧

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

::after

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

::before

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

Font Awesome の時計アイコン
  1. .fa-clock::before {
  2. content: "\f017";
  3. }

::first-letter

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

1文字目を大きくする(ドロップキャップ)
  1. .has-drop-cap:not(:focus):first-letter {
  2. float: left;
  3. font-size: 8.4em;
  4. line-height: .68;
  5. font-weight: 100;
  6. margin: .05em .1em 0 0;
  7. text-transform: uppercase;
  8. font-style: normal;
  9. }

::first-line

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

::selection

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