質問: **「最初の要素」と「最初の要素以外」にCSSを適用させたいのですが、下記2案の何れで実装した方が良いですか?** それぞれメリットデメリットはありますか? 指針となるコーディングルール的なものはありますか? **質問経緯** これまで「案B」で実装してきたのですが、最近「案A」を知りました。 「案A」で実装し直した方が良いかも、と思い質問します。 --- 案A.「最初の要素」と「最初の要素以外」にそれぞれのCSSを適用 ``` li:first-child {} li:not(:first-child) {} ``` 案B.「全要素」の後で「最初の要素」を上書き ``` li:{} li:first-child {} ```
回答: 結論だけ言うと、競合するプロパティだけを指定するなら両者は一緒です。つまり、両方のルールにともに `color` を指定するなら2つのコードの結果は同じです。それに対して、例えば案Bで `li` のルールだけに `color` を指定すれば当然リストの最初の要素にも文字色のプロパティが適用されますが、案Aでは同じようになりません。実際には中に書くプロパティの違いによって書き分けることになるでしょう。 しかしおそらくここでより重要なのは、**CSSのルールがどのような順番で適用されるのか**、ということです。案Bについて「〜の後で〜を上書き」と説明されていますが、CSSの決まりから言うと、コード上であとにあるものが優先的に適用される**とは限りません**。実際、案Bの2つのルールの順番を変えても、`li:first-child` のルールの方が優先されて適用されます(試してみてください)。 それでは、ある要素が複数のルールにマッチする場合は、どのように適用するルールが選択されるのでしょうか? 精密なルールについては Mozilla のドキュメント を見ていただきたいのですが、簡単に説明すると、まず `!important` のついたルールが最優先、そこで同着なら **詳細度 (specificity)** の高い方が優先、それでも同着ならコードの出現順で解決されます。 詳細度とは、大雑把にいえばルールがどれくらい細かいか、ということです。広くマッチするルールより細かいルールの方が優先される、ということですね。案Bでいえば、 `li` より `li:first-child` の方が細かいので優先されるということです。実際には次のようなルールになっています。 1. IDセレクター (`#XXX`) の個数が多い方が優先。 2. 同着なら、クラスセレクター (`.XXX`) 、属性セレクター (`[href="..."]`) 、疑似クラス (`:first-child`) の合計個数が多い方が優先。 3. それでも同着なら、要素セレクター (`h1`) 、疑似要素 (`::first-letter`) の合計個数が多い方が優先。 4. それでも同着なら引き分け(ソースオーダーが用いられる)。 このあたりのルールを理解すれば、より自信をもってCSSを書けるようになると思います。興味があれば上にあげたリンクも読んでみてください。