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

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

## そもそも擬似クラスとは
> CSSの擬似クラス(Pseudo-classes)は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。
> 
> 引用元： [擬似クラス - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes)

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

### [補足]擬似クラスと擬似要素の違い
#### 擬似クラス
* 指定した要素全体を変更するもの
* シングルコロン(`:`)で指定

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

## 汎用的に使える擬似クラス
### 1. [:root](https://developer.mozilla.org/ja/docs/Web/CSS/:root)

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

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

### 2. [:not()](https://developer.mozilla.org/ja/docs/Web/CSS/:not)
一致しない要素を選択する擬似クラスです。
リストの最後の要素のみ`margin-bottom`や`border`を付与しない時によく使います。

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

### 3. [:target](https://developer.mozilla.org/ja/docs/Web/CSS/:target)
ターゲットとなるアンカーリンク先の要素を指定する擬似クラスです。
コンテンツを強調したり、表示切り換えをしたりする時に使います。

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

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

```css
.modal-item {
  display: none;
}

.modal-item:target {
  display: block
}
```

### 1〜３を用いたサンプルコード
<p class="codepen" data-height="463" data-theme-id="dark" data-default-tab="css,result" data-user="yuvernacrew-the-scripter" data-slug-hash="mdPgOBY" style="height: 463px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS selector 1">
</p>

## フォームで使える擬似クラス
### 4. [:focus-within](https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within)
子孫要素に1つでも`:focus`状態の要素がある時に、状態を変更するための擬似クラスです。
**※IEは対応していないため、気をつけてください**

```html

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

```css
form {
  border: 2px solid #ddd;
}

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

### 5. [:in-range](https://developer.mozilla.org/ja/docs/Web/CSS/:in-range)
min/max属性によって値が制限されている場合において、
入力された値が制限範囲内の時、要素を変更するための擬似クラスです。
**※IEは対応していないため、気をつけてください**

```html
<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>
```

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

### 6. [:out-of-range](https://developer.mozilla.org/ja/docs/Web/CSS/:out-of-range)
min/max属性によって値が制限されている場合において、
入力された値が制限範囲外の時、要素を変更するための擬似クラスです。
**※IEは対応していないため、気をつけてください**

```html
<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>
```

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


### 7. [:valid](https://developer.mozilla.org/ja/docs/Web/CSS/:valid)
入力された値の形式が正しい時に、要素を変更するための擬似クラスです。
**※IE9は対応していないため、気をつけてください**

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

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

### 8. [:invalid](https://developer.mozilla.org/ja/docs/Web/CSS/:invalid)
入力された値の形式が不適切な時に、要素を変更するための擬似クラスです。
**※IE9は対応していないため、気をつけてください**

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

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

### 9. [:required](https://developer.mozilla.org/ja/docs/Web/CSS/:required)
required属性が設定されている要素を変更するための擬似クラスです。

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

```css
input:required {
  background-color: red;
}
```

### 10. [:optional](https://developer.mozilla.org/ja/docs/Web/CSS/:optional)
required属性が設定されていない要素を変更するための擬似クラスです。

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

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

### 4〜10を用いたサンプルコード
<p class="codepen" data-height="348" data-theme-id="dark" data-default-tab="css,result" data-user="yuvernacrew-the-scripter" data-slug-hash="MWyRJoB" style="height: 348px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="MWyRJoB">
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>