CSS の特異性に関する初心者向けガイド

CSS ルールを上書きしようとして、本来の動作をしていなかったことはありませんか? または、1 つの要素が異なる CSS セレクターの組み合わせで複数回ターゲットにされている場合、一度に 1 つのルールしか適用されないことに気付きましたか? これはすべて、CSS 固有の規則によるものです。

CSS 固有性ルールは、特に初心者にとって、理解するのが最も難しい概念の 1 つです。

CSS を使い始めたばかりの場合、標準的な順序ルールとして、最新の CSS ルールが古いものを上書きするべきだと思うかもしれません。 簡単に思えますが、いつもうまくいくとは限りません。 いつ、どの CSS ルールを適用する必要があるかは、CSS の固有性によって異なります。

では、CSS 固有性とは何か、そしてそれを効率的に使用する方法について詳しく説明しましょう。

CSSの特異性とは?

簡単に言えば、1 つの要素に対して複数の CSS セレクターがある場合、特定の値が高いものが適用されます。

異なるセレクターには異なる重みがあり、ブラウザはどれがその要素に最も関連するかを決定します。

どのように機能しますか?

セレクターの特異性は、次の 4 つのレベルに分類できます。

1. インライン スタイルまたは CSS
2. ID
3. クラス、疑似クラス、および属性
4. 要素または疑似要素

CSS が HTML ドキュメントに直接適用されるインライン スタイルまたはCSS は、この<p>のようになります。 インライン スタイルは、常に最高の特異性レベルを持ちます。

この順序で 2 番目は#contentなどのIDです。 したがって、ID を使用するセレクターは、2 番目に高い特異性レベルを持ちます。

Class 、 pseudo-classes 、およびattributes は、この順序で 3 番目です。 それらは、それぞれ.post 、 :hover 、および[title]のようになります。

要素と疑似要素は最も価値がありません。 liと:after要素と疑似要素の基本的な例です。

計算

特異度の値は、次のガイドラインで計算できます。

• インライン スタイルまたは CSS: 1,0,0,0
• ID: 0,1,0,0
• クラスまたは疑似クラスと属性: 0,0,1,0
• 要素と疑似要素: 0,0,0,1
• ユニバーサルセレクター(*): 0

セレクターの特異性レベルを確認するには、特異性計算機を使用できます。

CSS 固有性の基本ルール

特異性がどのように構成されているかがわかったので、いくつかの一般的な規則と例について説明しましょう。

これは、例で使用するベース HTML です。 ここでは、コンテナ内に#contentを持つ小さなリストがあります。

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

ルール 1

要素に同じセレクターが 2 つ以上ある場合、それらはすべて同じ特異度値を持つため、低い方または最後のセレクターが適用されます。

次の CSS スニペットでは、両方のセレクターの特異性が同じであるため、 liの色は黄色になります。

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

ルール 2

1 つの要素に対して複数のセレクターが使用されている場合は、特定の値が高いセレクターが適用されます。

次の例では、 liが 2 つの異なるセレクターの対象となり、両方がフォントの色に影響します。 では、どのルールを適用する必要がありますか?

前の例と同様に、CSS 順序の概念では 2 番目の規則が適用されます (つまり、 .list li ul li色は緑になります)。

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

ルール 3

特異性レベルではクラスが要素を上回っていることがわかりました。では、ID で何が起こるか見てみましょう。

次の例では、同じ要素を対象とし、フォントの色に影響を与えるクラスと ID があります。 再び同じ質問: どのルールを適用する必要がありますか?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

前述のように、ID はクラス、属性、要素よりも固有値が高いため、色は青色になります。 特異性レベルを高めるには、常にID をターゲットにします。

ルール 4

!important 、特定値のセレクターをオーバーライドします。 ただし、 !important CSS のベスト プラクティスとは見なされないため、過度に使用しないでください。

あなたが CSS の作成者であり、既存のルールをオーバーライドしない場合、 !important使用する必要はほとんどありません。

!important使用するのは、他の誰かの CSS をオーバーライドしようとしていて、具体性が以前のセレクターを上回ることができない場合、特に HTML での CSS の配置順序を制御できない場合に限ってください。

これは主に、さまざまなプラグインやテーマによって既に追加されている多くの CSS ファイルを見つけることができる WordPress で作業しているときに発生します。

通常、プラグイン CSS はプラグインに固有であり、ID、inline-css、さらには!importantを使用して特定性を高め、CSS の競合を回避します。 その CSS をオーバーライドするには、さらに高い特異性を使用する必要があります。 これらのシナリオでは、 !importantを使用できます。

次の例では、 liを別の CSS セレクターでターゲットにして、前のシナリオを再作成していますが、 !importantすべてのルールをオーバーライドし、色が黄色になることがわかります。

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important具体性レベルを超えて CSS を強制することができます。

このルールを上書きすることはできないため!importantを使用するときは注意が必要です。 !importantをオーバーライドする唯一の方法は、CSS の後半で別の!importantを使用することです。そのため、CSS の威力を理解していないと、CSS が乱雑に見えてしまいます。

いくつかの例外

要素と疑似要素は特異性が最も低くなりますが、いくつかの興味深い (そして少し紛らわしい!) 例外があります。 (今見たルールに従っていないように見えるので混乱します。)

この例では、 :first-child (疑似クラス) と :first-line (疑似要素) が表示されます。 疑似クラスは疑似要素よりも特異性が高いことがわかったので、それによると、段落の最初の行の色は緑にする必要がありますが、代わりにピンクになります。

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

ここで順序が問題になると思うかもしれませんが、順序を入れ替えても出力は変わりません。 特異度計算機は、結果とは異なる図を示します。

これは、特異性が少し混乱するところです。 この結果の理由は:first-lineが要素に近く、おそらく inline-style として扱われているためだと推測できます。 別の例については、jsfiddle を確認できます。

特異性を効率的に使用するには？

CSS の特異性ルールを理解していれば、それを非常に効率的に使用して、CSS を再利用可能にすることができます。

同じ.button異なる背景色で使用したい場合、特定のセレクター.red-block .buttonを設定するとします。

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

.buttonが.red-blockコンテナーにラップされている場合、デフォルトのボタンの背景色は赤に変わります。

CSS の特異性は、テーマ作成者の CSS を独自の CSS でオーバーライドしようとする場合に、WordPress テーマをカスタマイズするときに非常に役立ちます。

避けるべきよくある間違い

非常に限定的なセレクターを使用する人もいますが、これは良い習慣ではありません。 必要なだけ具体的にしてください。 たとえば、次のコード スニペットはliをターゲットにしていますが、具体的すぎます。

 [css] div#content ul.list li{ color: purple; } [/css]

CSS を具体的にしすぎると、固くなり、再利用が難しくなります。 div#content ul.list liの代わりに.list li簡単に記述できます。これにより、CSS がよりクリーンになります。

その他のリソース

• 特異性に関する W3 組織
• CSS 特異性計算機
• IE バグ
• IEハック

結論

ご覧のとおり、CSS の特異性は重要なツールであり、すべてのフロントエンド開発者がツールキットに含める必要があります。 この概念を明確に理解することは、優れたフロントエンド開発者になるのに大いに役立ちます。