高度な CSS セレクターを克服する

元の記事:高度な CSS セレクターを征服する
翻訳元:高度な CSS セレクターを使いこなす

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 つの数字で表されると考えると、非常に簡単です。

1. タグで style 属性が使用されていない限り、最初の数値 (a) は通常 0 です。
2. 2 番目の数値 (b) は、セレクター上の ID の数の合計です。
3. 3 番目の数値 (c) は、このセレクターで使用される他の属性セレクターと疑似クラスの合計です。これには、クラス (.example) と属性セレクター (li[id=red] など) が含まれます。
4. 4 番目の数値 (d) は、要素 (table、p、div など) と疑似要素 (first-line など) をカウントします。
5. ユニバーサル セレクター (*) の優先順位は 0 です。
6. 2 つのセレクターの優先順位が同じ場合、スタイル シート内の後のセレクターが有効になります。

理解しやすいように、いくつかの例を見てみましょう。

• #サイドバー h2 — 0、1、0、1
• h2.title — 0、0、1、1
• h2 + p — 0、0、0、2
• #サイドバー p:最初の行 — 0、1、0、2

以下の例では、最初のものが 2 番目のものより優先順位が高いため、機能します。

• #サイドバー p#first { 色: 赤 } — 0、2、0、1;
• #サイドバー p:first-line { color: blue } — 0, 1, 0, 2

少なくとも優先順位の仕組みを基本的に理解することは重要ですが、Firebug などの一部のツールでは、特定の要素を検査するときに、すべての CSS セレクター ペアをセレクターの優先順位の順にリストして、どれが特定の要素にあるかを確認します。セレクターを有効にするのに役立ちます。

これにより、どのセレクターが要素に作用しているかを非常に簡単に確認できます。

役立つ記事:

• CSS の特異性: 知っておくべきこと
• リンクの特異性￣MeyerWeb CSS: 特異性戦争
• プロパティ値の割り当て、カスケード、継承 - W3C