mzgkworks.com

Stack the little bets.

CSSの適用優先度の考え方

   [Knowledge]    #CSS

CSSが適用される優先度

詳細度の大きい順(点数例)に適用が優先される。

セレクタ名 セレクタ例 ページ内での複数指定 詳細度 点数例
idセレクタ #id 1度のみ 100
classセレクタ .class 複数可 10
要素セレクタ div, p 複数可 1
擬似セレクタ :first-child 複数可 1
全称セレクタ * 1度 最小 0

組合せなしの場合

「idセレクタ > classセレクタ > 要素セレクタ > 全称セレクタ」の順で適用される。
セレクタが同じ場合(詳細度が同じなので)、あとに書かれたものが優先される。

組合せ等がある場合

組合せたセレクタ名の詳細度の合計が高い順に、適用される。
 classセレクタ+要素セレクタ > classセレクタ
※ただし、同じレベルのセレクタを重ねていっても、上位のセレクタに勝つことはない。

<div class="box">
  <p class="text">内側のテキスト</p>
</div>
<p class="text">外側のテキスト</p>
.text {
  color: red;
}
.box p {
  color: blue;
}

上記の場合、

には同じclassが指定されているが
「 .box(10) + p(1) > .text(10) 」となるので、

内側のテキスト : blue
外側のテキスト : red

となる。

要素 > 親要素

親要素から受け継ぐ指定より、要素そのものへの指定が優先して適用される。

<div class="box">
  <p class="text">内側のテキスト</p>
</div>
<p class="text">外側のテキスト</p>
p {
  color: red;
}
.box {
  color: blue;
}

上記の場合、詳細度的には「.box(10) > p(1)」だが、「.box」は p の親要素 div のクラスセレクタであり、p には直接指定がある。
なので、直接の指定 > 親要素の指定 となり、

内側のテキスト : red
外側のテキスト : red

となる。

!important

詳細度が一番大きくなり、インラインCSSを含めすべてを上書きすることができる。