優先順位

Home>CSS>用途別リファレンス>優先順位

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

CSSを適用するときに、内容が重複するような指定をした場合、優先される順位があります。

順位はセレクタの種類によって変わります。

セレクタの種類

セレクタには以下の4つの種類があります。
セレクタには、その種類によりポイントがあります。
ポイントは、並列にかかれることで加算されていきます。

セレクタ ポイント
#(ID) 100
.(class) 10
HTMLタグ 1
*(全称セレクタ) 0

ポイントは以下のように計算されます。

セレクタ ポイント
p 1
p .class 11
#id p 101
#id p .class 111

このポイントが多い順に優先順位が決定されます。

順位のサンプル

要素に含まれる別要素の場合

body{ font-size:20pt; }
p{ font-size:12pt; }

上記のサンプルの場合、フォントのサイズを、body要素以下はすべて20ポイントにするように指定した後に、p要素は12ポイントにするように指定しています。

この場合、p要素ではないテキストについては20ポイントが適用され、p要素内のテキストは12ポイントになります。

要素にクラスを指定する場合

p{ font-size:12pt;}
.f20{ font-size:20pt;}

上記のサンプルの場合、p要素を使っただけの場合は、フォントサイズは12ポイントになります。
p要素にf20クラスを指定した場合には、フォントサイズは20ポイントになります。

重複して指定する場合

p{ font-size:12pt; }
td p { font-size:20pt;}

上記のサンプルでは、p要素に書いたテキストは12ポイントになります。
table要素内のtd要素p要素を使った場合には、フォントサイズは20ポイントになります。

関連リンク

よく読まれている記事

UpDate:2010-11-19