CSSの優先順序のメモ

Posted at 2024-09-10

はじめに

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

a:hoverの例

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

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

<!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スタイルは適用されません。

開発ツールの利用の仕方

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

1. 通常時の表示：

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

2. 疑似クラスの強制適用：

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

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

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

基本的なCSSの適用順序と特異性

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

特異性：特異性が高い方のCSSルールが優先されます。
- 例えば、a:hoverよりも、.custom-linkクラスの方が特異性が高いため、同じプロパティに対してスタイルが競合する場合は.custom-linkのスタイルが優先されます。
定義順序：同じ特異性の場合、後に定義されたスタイルが優先されます。
- 例えば、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時に意図したスタイルを適用します。

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

2. 特異性を上げる

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

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

3. `!important`の使用

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

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

まとめ

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up