More than 5 years have passed since last update.

CSSセレクタの詳細度 (優先順位)

Last updated at 2019-11-12Posted at 2019-11-12

CSSセレクタの詳細度とは

ある要素へのCSSの指定が競合した場合、どのセレクタが優先されるかということ。

⚠️ 同じ優先順位の場合は後に書いたCSSが優先される。

<body>
  <div class="red">
    <h1>あああ</h1>
  </div>
</body>

.red {
  color: red;
}
div {
  color: black;
}

classの方が要素型よりも強いので文字がredになる。