個別記事

前後の記事

CSSのspecificity

この記事が属するカテゴリー
CSS

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

2004-12-06T17:35:44+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/83

"CSSのspecificity"へのトラックバックはまだありません。

コメント

"CSSのspecificity"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)