css詳細度に関して

CSSには、セレクタをどの様に書くかによって、優先順位が決まる、詳細度という考え方があります。 この詳細度が解っていないと、複雑なサイトを作った時に、想定通りにCSSを当てられない可能性があるので、理解が必要です。 各々のセレクト方法に点数があり、それを計算していくとわかりやすいです。


セレクタ名 例 点数
ユニバーサルセレクタ * 0
要素セレクタ・擬似要素 h1、::after 1
属性セレクタ・classセレクタ・擬似クラス .title、:hover 10
idセレクタ #wrap 100
インライン記述(style属性) <p style="color:red"> 1000
!important color:red!important; 10000

上記の表を元に計算します。
例1)
HTML
<h1 id="midashi" class="title">大見出し<h1>

CSS
#midashi{
color:red;
}

.title{
color:green;
}

h1{
color:blue;
}

 この場合、大見出しの色は赤になります。
#midashiは、idセレクタなので100点、
.titleは、classセレクタなので10点、
h1は、要素セレクタなので1点。
よって、idセレクタである、#midashiが優先されます。

例2)
HTML
<div id="about_box" class="box">
    <p id="text" class="lead">ここがリード分です</p>
</div>

CSS
#text{
color:red;
}

.box .lead{
color:green;
}

#about_box p{
color:blue;
}

 この場合、pタグの色は、何色になるでしょうか。
正解は青です。
#textは、idセレクタで100点。
.box .leadは、クラスセレクタが2個で、10点+10点=20点
#about_box pは、idセレクタと要素セレクタで、100点+1点=101点

こんな風に、使っているセレクタに該当する点数を、全部足して、一番高い点数のものを優先します。
ラベル: