CSSの優先順序のメモ


## はじめに
cssの反映の優先順序でよくわからなくなったので、一旦整理したことをメモっておきます。


## a:hoverの例
### 例: クラスがあるリンクに`a:hover`が適用されない

クラスで特定の`hover`スタイルが定義されていない場合、基本の`a:hover`スタイルがクラスのあるリンクにも適用される、と思っていたら適用されないようです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リンクの動き - クラスあり・なしのhover適用</title>
    <style>
        /* クラスを使用しないリンクのスタイル */
        a:link {
            color: blue;
            text-decoration: none;
        }
        a:visited {
            color: purple;
        }
        a:hover {
            color: green;
            text-decoration: underline;
        }
        a:active {
            color: red;
        }

        /* クラスを使用するリンクのスタイル (hoverは指定しない) */
        .custom-link:link {
            color: darkblue;
            text-decoration: none;
        }
        .custom-link:visited {
            color: darkmagenta;
        }
        /* .custom-link:hover は定義されていない */
        .custom-link:active {
            color: darkred;
        }
    </style>
</head>
<body>
    <p>クラスがないリンクの例</p>
    <a href="#">通常リンクのテキスト</a>

    <p>クラスがあるリンクの例 (hover未設定)</p>
    <a href="#" class="custom-link">カスタムリンクのテキスト</a>
</body>
</html>
```

### 動作説明
**以下は間違っています。**
- **クラスがないリンク**：クラスを持たないリンクは、`a:hover`のスタイルがそのまま適用されます。`hover`時にリンクは緑色になり、下線が表示されます。
  
- **クラスがあるリンク**：`custom-link`クラスが適用されていますが、クラス内で`hover`のスタイルは指定されていないため、グローバルな`a:hover`スタイルが適用されます。結果として、`hover`時にリンクは緑色になり、下線が表示されます。


しかしながら`a:hover`スタイルは適用されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/fd0af381-cc79-571c-d247-3e120d5fb96e.png)

## 開発ツールの利用の仕方
`a:hover`が開発ツールに表示されるかについては、通常次の状況で確認できます。

### 1. **通常時の表示**：
`a:hover`のスタイルは、実際にリンクにマウスが乗った時（ホバー状態）にのみ適用されるため、開発者ツールでそのスタイルを確認するには、マウスをリンクの上に置いた状態にする必要があります。このとき、`:hover`のスタイルが適用され、開発者ツールの「Styles」タブに表示されます。

### 2. **疑似クラスの強制適用**：
Chromeや他のブラウザの開発ツールでは、擬似クラス（`hover`、`focus`など）を強制的に適用する機能があります。開発者ツールを使用して、`a:hover`のスタイルを確認したい場合は、以下の手順で確認できます：

- 開発者ツール（F12や右クリック → "検証"）を開いて、確認したいリンクを選択します。
- **"Styles"タブ**の上部にある「`:hov`」というボタンをクリックします。
- 表示されるメニューから「`:hover`」を選択すると、`hover`状態が強制的に適用されます。
- これにより、ホバー状態で適用されるスタイルが「Styles」タブに表示され、確認できます。

## なぜa:hoverが適用されないのか

### 基本的なCSSの適用順序と特異性
CSSのスタイルは**特異性**と**定義の順序**に依存して適用されます。ここでのルールは2つあります：

1. **特異性**：特異性が高い方のCSSルールが優先されます。
   - 例えば、`a:hover`よりも、`.custom-link`クラスの方が特異性が高いため、同じプロパティに対してスタイルが競合する場合は`.custom-link`のスタイルが優先されます。

2. **定義順序**：同じ特異性の場合、**後に定義された**スタイルが優先されます。
   - 例えば、`a:hover`と`.custom-link:hover`が同じ特異性であれば、後から書かれたCSSのスタイルが優先されます。

### 現在のシナリオについて
もし`a:hover`のスタイルが`.custom-link`で定義されているスタイルよりも**後に定義されている場合**でも、特異性の高い`.custom-link`のスタイルが優先されます。このため、`.custom-link`のスタイルが、特異性の低い`a:hover`のスタイルを上書きします。

### なぜ取り消し線が出るのか
現在の状況では、**特異性の問題**が発生しており、以下のように推測されます：

- `.custom-link`クラスの特異性が`a:hover`よりも高い。
- そのため、`a:hover`で指定されたスタイルが適用されず、クラスのスタイルが優先され、`a:hover`のスタイルは取り消し線が引かれて表示されるのです。

### 解決方法
この状況を解決するためには、以下の方法が考えられます。

#### 1. `.custom-link:hover`として明示的に定義
クラスに対しても`hover`のスタイルを明示的に指定し、特異性を同等にすることで、`hover`時に意図したスタイルを適用します。

```css
.custom-link:hover {
    color: green;
    text-decoration: underline;
}
```

#### 2. 特異性を上げる
`a:hover`の特異性を上げて、クラスのスタイルより優先させる方法です。例えば、以下のようにクラスと要素の組み合わせで特異性を高めます。

```css
a.custom-link:hover {
    color: green;
    text-decoration: underline;
}
```

#### 3. `!important`の使用
最後の手段として、`!important`を使って強制的に`a:hover`のスタイルを適用します。ただし、これは通常避けるべきです。

```css
a:hover {
    color: green !important;
    text-decoration: underline !important;
}
```

### まとめ
CSSの優先順位は、**特異性**が最も重要です。今回のケースでは、`.custom-link`の特異性が`a:hover`よりも高いため、`a:hover`のスタイルが適用されず、取り消し線が表示されています。特異性の問題を解決するために、クラスに`hover`を明示的に定義するか、特異性を高めるか、`!important`を使う方法があります。