2019年現在、主要なブラウザで対応されていて十分使用可能なCSS擬似クラス、擬似要素のまとめです。
実験的な機能やサポートが不十分なものには触れず、「今使える」ものをまとめています。
この記事で紹介する擬似クラスや擬似要素は、モバイル版含め主要ブラウザのほとんどでサポートされているものに限ります。例えば、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: purple;
- }
擬似要素の一覧
擬似要素は、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
は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部を選択します。