CSS は、Web デザイナーが利用できる最も強力なツールの 1 つです。これを使用すると、ページタグを変更せずに、Web サイトのインターフェースを数分で変更できます。しかし、CSS セレクターが便利であると誰もが認識しているという事実にもかかわらず、CSS セレクターはその潜在能力を発揮するには程遠く、時々、過剰で役に立たないクラス、ID、div、Span などを使用する傾向があります。私たちの HTML は非常に乱雑です。
マークアップ内でこれらの「疫病」が蔓延するのを避け、マークアップをクリーンでセマンティックに保つための最善の方法は、追加のクラスや ID を使用せずに特定の要素をターゲットにできる、より複雑な CSS セレクターを使用することです。この方法でもコードを作成できます。スタイルはより柔軟になります。
CSSの優先度
高度な CSS セレクターの領域に入る前に、CSS の優先順位がどのように機能するかを理解することが重要です。そうすることで、セレクターを適切に使用する方法を知り、優先順位に注意していればデバッグに多くの時間を費やすことを避けることができます。問題を解決するには
CSS を作成するときは、一部のセレクターがカスケード内の他のセレクターよりも上位になることに注意する必要があります。最後に作成したセレクターは、同じ要素で以前に作成したスタイルを必ずしもオーバーライドするわけではありません。
では、特定のセレクターの優先順位をどのように計算するのでしょうか?優先順位が 1、1、1、1 または 0、2、0、1 のようにカンマで区切られた 4 つの数字で表されると考えると、非常に簡単です。
タグで style 属性が使用されない限り、最初の数値 (a) は通常 0 です。
2 番目の数値 (b) は、このセレクターの ID の数の合計です。
3 番目の数値 (c) は、このセレクターで使用される他の属性セレクターと疑似クラスの合計です。これには、クラス (.example) と属性セレクター (li[id=red] など) が含まれます。
4 番目の数値 (d) は、要素 (table、p、div など) と疑似要素 (first-line など) をカウントします。
ユニバーサル セレクター (*) の優先順位は 0 です。
2 つのセレクターの優先順位が同じ場合、スタイル シート内の後のセレクターが有効になります。
理解しやすいように、いくつかの例を見てみましょう。
#サイドバー h2 —
h2.title — 0、0、1、1
h2 + p — 0、0、0、2
#サイドバー p:最初の行 —
以下の例では、最初のものが 2 番目のものより優先順位が高いため、機能します。
#サイドバー p#first { 色: 赤 } —
#サイドバー p:first-line { color: blue } —
少なくとも優先順位の仕組みを基本的に理解することは重要ですが、Firebug などの一部のツールでは、特定の要素を検査するときに、すべての CSS セレクター ペアをセレクターの優先順位の順にリストして、どれが特定の要素にあるかを確認します。セレクターを有効にするのに役立ちます。
どのセレクターが要素に作用しているかを非常に簡単に確認できるようになります。