Help us understand the problem. What is going on with this article?

CSSセレクタ詳細度の理解を深める

社内勉強会のメモ

CSSセレクタの詳細度とは

仕様

https://www.w3.org/TR/selectors-3/#specificity

仕様にもある通り、「詳細度」というのは

selector's specificity

なので、「セレクタの詳細度」のこと。

詳細度は計算できる。

MDN

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

詳細度Specificityは、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。

「ちゃんとプロパティを書いてるのに適用されない!」みたいになってDevToolsを開いてみたら、実際に当てたいプロパティに打ち消し線が入っている、みたいなことが起きうる原因。

※以下の文章の引用は、注釈が無い限りこちらのページからの引用となります。

基本

単品で比べた時のプロパティの優先度の高さの順番は以下の通り
(ここで「詳細度」と書いていないのは、厳密に言えば!importantとstyle属性はセレクタでは無いので、セレクタの詳細度とは別の仕様であるため)

高

0. HTML上のstyle属性に書かれたプロパティ
1. !important
2. IDセレクタ
3. クラスセレクタ、属性セレクタ、擬似セレクタ
4. 要素型セレクタ、擬似要素
5. CSSの記載順序がうしろのプロパティ

低

HTML上のstyle属性に書かれたプロパティ

要素に追加されたインラインスタイルは、常に外部スタイルシートの中のスタイルを上書きします

セレクタの詳細度とは別の仕様で、CSSに書かれたプロパティを上書きするので、最も優先度が高い。

!important

!important 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。

セレクタの詳細度とは別の仕様で、他のプロパティを上書きするので、優先度が高い。
同じプロパティに!importantが記載された場合は、セレクタの詳細度が適用される。

世紀末な無法地帯になるので使わないでください。

IDセレクタ、クラスセレクタ、属性セレクタ、擬似セレクタ、要素型セレクタ、擬似要素

  • IDセレクタ:#hoge
  • クラスセレクタ:.hoge
  • 属性セレクタ:[name="hoge"]
  • 擬似セレクタ::hover
  • 要素型セレクタ:div
  • 擬似要素:::before

これらがセレクタの詳細度の仕様で言及されているセレクタたち。

全称セレクター (*), 結合子 (+, >, ~, ' ', ||), 否定疑似クラス (:not()) は詳細度に影響を与えません。 (但し、 :not() の中で宣言されたセレクターは影響を与えます。)

詳細度の計算方法

考え方

セレクタたちは全員、詳細度の点数を持っている。

セレクタ {
  プロパティ: 値;
}

というCSSの記法のうち、「セレクタ」部分に登場するセレクタたちの点数の合計が、カギカッコの中の「プロパティ」たちの詳細度となる。

セレクタの点数

セレクタ 点数
ID 100
クラス、属性、擬似 10
要素型、擬似要素 1
全称、結合子、否定擬似クラス 0

hoge.css
.hoge.piyo {
  background-color: blue;
}

.hoge {
  background-color: red;
}

というファイルがあったとして、上下のそれぞれの詳細度は

  • 上:クラスセレクタ(10点)が2個なので20点。
  • 下:クラスセレクタ(10点)が1個なので10点。

通常であればcssは後に書いたプロパティが優先されるが、このファイルの場合上に書かれたセレクタの方が詳細度が高いので、上のbackground-color: blue;が適用される。

スクリーンショット 2019-11-07 16.20.04.png

HTMLファイルを表示する
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSSの詳細度</title>
  <style>
    .hoge {
      width: 200px;
      height: 200px;
    }

    .hoge.piyo {
      background-color: blue;
    }

    .hoge {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="hoge piyo"></div>
</body>
</html>

続き工事中

ryokkkke
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした