意外と知られていない便利な擬似クラス10選 #CSS

2020年９月現在、60個もの擬似クラスがあります。
その中でも、そこまで知名度は高くないけど実は便利な擬似クラスを
「汎用的に使える擬似クラス」と「フォームで使える擬似クラス」に分けてご紹介します！

そもそも擬似クラスとは

CSSの擬似クラス(Pseudo-classes)は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。

引用元：擬似クラス - CSS: カスケーディングスタイルシート | MDN

つまり、特定の状態に対してスタイルを当てられるセレクタのことを、擬似クラスといいます。

[補足]擬似クラスと擬似要素の違い

擬似クラス

指定した要素全体を変更するもの
シングルコロン(:)で指定

擬似要素

指定した要素の一部を変更するもの
ダブルコロン(::)で指定

汎用的に使える擬似クラス

1. :root

DOMツリー上の最上位の親ルートの要素(HTMLでは<html>)を選択する擬似クラスです。
基本的には、CSS変数を定義する場として使います。

:root {
  --primary-color: #55c500;
  --container-padding: 20px 15px;
}

2. :not()

一致しない要素を選択する擬似クラスです。
リストの最後の要素のみmargin-bottomやborderを付与しない時によく使います。

.example-list li:not(:last-child) {
  margin-bottom: 20px;
}

3. :target

ターゲットとなるアンカーリンク先の要素を指定する擬似クラスです。
コンテンツを強調したり、表示切り換えをしたりする時に使います。

<a href="#modalItem1">モーダルを表示</a>

<div class="modal-item" id="modalItem1">
  モーダル
</div>

.modal-item {
  display: none;
}

.modal-item:target {
  display: block
}

1〜３を用いたサンプルコード

フォームで使える擬似クラス

4. :focus-within

子孫要素に1つでも:focus状態の要素がある時に、状態を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください


<form>
  <input type="text" placeholder="名前">
  <input type="number" placeholder="電話番号">
</form>

form {
  border: 2px solid #ddd;
}

/* 名前 or 電話番号のフォーム入力中(focusされている時)は、背景色が変わる */
form:focus-within {
  background: #55c500;
}

5. :in-range

min/max属性によって値が制限されている場合において、
入力された値が制限範囲内の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください

<p>在庫： 20個</p>

<form>
  <label for="quantity">購入個数：</label>
  <input id="quantity" name="quantity" type="number" min="1" max="20" value="1">
  <p class="message">メッセージ: </p>
</form>

input:in-range + .message::after {
  display: inline-block;
  content: "購入可能です";
}

6. :out-of-range

min/max属性によって値が制限されている場合において、
入力された値が制限範囲外の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください

<p>在庫： 20個</p>

<form>
  <label for="quantity">購入個数：</label>
  <input id="quantity" name="quantity" type="number" min="1" max="20" value="1">
  <p class="message">メッセージ: </p>
</form>

input:out-of-range + .message::after {
  display: inline-block;
  content: "在庫がありません";
}

7. :valid

入力された値の形式が正しい時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください

<form>
  <label for="phone">電話番号：</label>
  <input type="tel" id="phone" name="phone" pattern="^(0{1}\d{9,10})$">
  <p class="message">メッセージ: </p>
</form>

input:valid + .message::after {
  display: inline-block;
  content: "ok";
}

8. :invalid

入力された値の形式が不適切な時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください

<form>
  <label for="phone">電話番号：</label>
  <input type="tel" id="phone" name="phone" pattern="^(0{1}\d{9,10})$">
  <p class="message">メッセージ: </p>
</form>

input:invalid + .message::after {
  display: inline-block;
  content: "値が不適切です";
}

9. :required

required属性が設定されている要素を変更するための擬似クラスです。

<form>
  <label for="name">名前：</label>
  <input type="text" id="name" name="name" required>
</form>

input:required {
  background-color: red;
}

10. :optional

required属性が設定されていない要素を変更するための擬似クラスです。

<form>
  <label for="address">住所：</label>
  <input type="text" id="address" name="address">
</form>

input:optional {
  background-color: #eee;
}

意外と知られていない便利な擬似クラス10選