2020年９月現在、60個もの擬似クラスがあります。
その中でも、そこまで知名度は高くないけど実は便利な擬似クラスを
「汎用的に使える擬似クラス」と「フォームで使える擬似クラス」に分けてご紹介します！
そもそも擬似クラスとは
CSSの擬似クラス(Pseudo-classes)は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。
つまり、特定の状態に対してスタイルを当てられるセレクタのことを、擬似クラスといいます。
[補足]擬似クラスと擬似要素の違い
擬似クラス
- 指定した要素全体を変更するもの
- シングルコロン(
:)で指定
擬似要素
- 指定した要素の一部を変更するもの
- ダブルコロン(
::)で指定
汎用的に使える擬似クラス
1. :root
DOMツリー上の最上位の親ルートの要素(HTMLでは<html>)を選択する擬似クラスです。
基本的には、CSS変数を定義する場として使います。
:root{--primary-color:#55c500;--container-padding:20px15px;}2. :not()
一致しない要素を選択する擬似クラスです。
リストの最後の要素のみmargin-bottomやborderを付与しない時によく使います。
.example-listli:not(:last-child){margin-bottom:20px;}3. :target
ターゲットとなるアンカーリンク先の要素を指定する擬似クラスです。
コンテンツを強調したり、表示切り換えをしたりする時に使います。
<ahref="#modalItem1">モーダルを表示</a><divclass="modal-item"id="modalItem1">モーダル
</div>.modal-item{display:none;}.modal-item:target{display:block}1〜３を用いたサンプルコード
フォームで使える擬似クラス
4. :focus-within
子孫要素に1つでも:focus状態の要素がある時に、状態を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください
<form><inputtype="text"placeholder="名前"><inputtype="number"placeholder="電話番号"></form>form{border:2pxsolid#ddd;}/* 名前 or 電話番号のフォーム入力中(focusされている時)は、背景色が変わる */form:focus-within{background:#55c500;}5. :in-range
min/max属性によって値が制限されている場合において、
入力された値が制限範囲内の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください
<p>在庫： 20個</p><form><labelfor="quantity">購入個数：</label><inputid="quantity"name="quantity"type="number"min="1"max="20"value="1"><pclass="message">メッセージ: </p></form>input:in-range+.message::after{display:inline-block;content:"購入可能です";}6. :out-of-range
min/max属性によって値が制限されている場合において、
入力された値が制限範囲外の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください
<p>在庫： 20個</p><form><labelfor="quantity">購入個数：</label><inputid="quantity"name="quantity"type="number"min="1"max="20"value="1"><pclass="message">メッセージ: </p></form>input:out-of-range+.message::after{display:inline-block;content:"在庫がありません";}7. :valid
入力された値の形式が正しい時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください
<form><labelfor="phone">電話番号：</label><inputtype="tel"id="phone"name="phone"pattern="^(0{1}\d{9,10})$"><pclass="message">メッセージ: </p></form>input:valid+.message::after{display:inline-block;content:"ok";}8. :invalid
入力された値の形式が不適切な時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください
<form><labelfor="phone">電話番号：</label><inputtype="tel"id="phone"name="phone"pattern="^(0{1}\d{9,10})$"><pclass="message">メッセージ: </p></form>input:invalid+.message::after{display:inline-block;content:"値が不適切です";}9. :required
required属性が設定されている要素を変更するための擬似クラスです。
<form><labelfor="name">名前：</label><inputtype="text"id="name"name="name"required></form>input:required{background-color:red;}10. :optional
required属性が設定されていない要素を変更するための擬似クラスです。
<form><labelfor="address">住所：</label><inputtype="text"id="address"name="address"></form>input:optional{background-color:#eee;}