CSSとは、その名が示す通り、上から下へ連なる、流れるスタイルシート。つまり、同じ箇所に対して違う指定をすれば、後から指定したものが上書きされるわけです。が、複数のスタイルシートを使用してサイトを作成していると、specificity（特異性）という法則があるのを忘れて、「あれ、指定通りになんねぇよ、ムキー！」なんて事が発生する可能性がなきにしもあらず。
例えば例として以下のようなhtmlがあるとします。
<div id="work">
<p class="wish">今日こそは早く帰りたい</p>
</div>これに対し下記のCSSを用意したとします。
#work p {
color: #0000FF;
}
p.wish {
color: #000000;
}
workに含まれるp、wishというクラスのp、両方とも同じ「p」を指しています。後の指定が上書きされるとすると、当然文字色は黒くなるはずですが、この場合は青、つまり上の指定が優先されます。その理由はspecificityが関係している訳で、分かりやすく言えば、セレクタの種類ごとにポイント（点数）をふり、合計値が高い方が優先されるっつうことです。
- タイプセレクタ
- h1、p、ul、dlなど（まぁ、要はタグに対してですね）＝1
- classセレクタ
- .hogeなど、ピリオドを頭につける（文書内に複数指定でき、要素のグルーピングとして使用）＝10
- IDセレクタ
- #hogehogeなど、いげた（ハッシュマーク）を頭につける（文書内に一意で、個体識別として使用）＝100
先ほどのCSSにこれを当てはめると、「#work p」は100+1で101点、「p.wish」は10+1で11点となり、「#work p」が優先されるわけです。もちろん、同値であれば、後に出てきた方が優先されます。
じゃ最重要規則の!importantを「p.wish」の方に付けてcolor: #000000 !important;ってやるとどうなるかっつうと、これはidよりも優先度が高くなるので、文字の色は黒になる訳です。
Comments