diaryこの広告は、90日以上更新していないブログに表示しています。詳細度はCSSをメンテナンス・スケールさせるうえでもっともトラブルを生む要因となりうるものの1つです。詳細度を意識せず、適切にCSSを設計しないと、新しくルールセットを作成しても意図したように変更が反映されない、あるいは意図しないところに変更が反映されてしまう問題が生じます。これらの問題は多くの場合、HTML/CSSの書き直しで修正できますが、その場しのぎの修正はより事態を複雑にしメンテナンスコストを高めます。この記事ではCSSの詳細度(Specificity)、詳細度問題への事前・事後の対処方法について紹介することでよりよい詳細度ライフを皆さんに送っていただくことを目標とします。CSSはどう適用されるのかCSSでは最も詳細度が高く、一番後ろにあるルールセットをもとに、ある要素のプロパティと値が決まります。詳細度の算出については後述しますがidよりclassが強いことは覚えておきましょう。CSSの詳細度はセレクタを基本としつつ、style属性(style="")、!importantなどいくつかの例外をもとに決定されます。display:list-item}CSS中の基本的な詳細度の算出CSSの詳細度はある要素に対して、セレクタ中のidの個数をaセレクタ中のclass、擬似クラス、属性の個数をbセレクタ中の要素、擬似要素をcセレクタ中の全称セレクタ(*)は無視としたときの、a-b-cの値の大きさで決まります。abcの値の合計ではなく、abcそれぞれの値の大きさの比較であることが重要です。aのより大きいセレクタ、aの値が同じ場合はbのより大きい方、bの値が同じ場合はcのより大きい方がより詳細度が高くなります。*/擬似クラスとは:hoverなど要素に対して状態をもとにスタイルを適用するためのものです。擬似要素とは:beforeとか:first-lineとかのことです。