CSSのspecificity

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よりも優先度が高くなるので、文字の色は黒になる訳です。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/298

Comments