
あとから書いた指定が効かなかった経験はありませんか?
原因はセレクタの点数化によるものです。
どういうことなのか、さっそく解説に行きましょう!
セレクタには点数が付いている
まずはセレクタの確認です。

<h2>がセレクタですね。
セレクタ(selector) = 選択なので、いろいろある要素の中から<h2>を選んで指定するみたいな意味です。
日本語に置き換えると理解しやすいかもしれません。
で、おもな3つのセレクタとは以下になります。
- 要素セレクタ
- classセレクタ
- idセレクタ
これは大丈夫ですね。
そして、この優先度が『id > class > 要素』というのも、たぶんご存知かと思います。
<h2 id="heading" class="heading">赤いままだぞー!</p>
#heading {
color: red;
}
.heading {
color: blue;
}
赤いままだぞー
あとに書いた.heading
が効いてません。
で、なぜこうなるかと言えば、どのセレクタで指定するかによって点数が決まっているからです。
各セレクタの点数
セレクタにはidやclass以外にもあり、以下のように点数化されています。
セレクタ | 点数 | 例 |
要素 | 1 | div |
擬似要素 | 1 | ::before |
擬似クラス | 10 | :hover |
class | 10 | .sample |
id | 100 | #sample |
タグ内への直接指定 | 1000 | style=”” |
点数化されているので、同じ要素に指定の上書きをしようと思ってもできないケースが出てくるのです。
例えば、こんな感じです。
<p class="text">まだ<span>赤い</span>ままだぞー!</p>
.text span {
color: red;
}
p span {
color: blue;
}
まだ赤いままだぞー
あとに書いたp span
が効いてません。
.text span
が(class + 要素)で11点、p span
が(要素 + 要素)で2点だからです。
以下で点数表に照らし合わせながら、もう少し計算例を見ていきましょう。
セレクタ | 点数 |
要素 | 1 |
擬似要素 | 1 |
擬似クラス | 10 |
class | 10 |
id | 100 |
タグ内への直接指定 | 1000 |
計算例 | 合計点 |
section div p | 3 |
h2.heading | 11 |
h1#id | 101 |
section div .heading | 12 |
.heading::hover | 20 |
<p style=”color: red”> | 1000 |
もし、あとに書いた指定を効かせるなら、少なくとも点数を同じにしておきましょう。
レスポンシブの記述には?
気をつけないといけないのが、レスポンシブの記述をした時です。
@media(max-width)〜
って書き方ですね。
じつはこれも、計算方法が影響してきちゃいます。
ちょいと見てみましょう。
<p class="text02">青になりたいぞー!</p>
p.text02 {
color: red;
}
⌇
@media(max-width: 500px) {
.text02 {
color: blue;
}
}
青になりたいぞー!
パソコンでご覧の方は、検証にして画面幅を500px以下にしてみてください。
文字は赤のままだと思います。
ちなみに上の指定は、p.sample
が11点で、.sampleが
10点ですね。
@mediaなら500px以下では中に書いた指定が優先しそうですが、バッチリ点数計算がされてしまうので、そこはお気をつけください。
記述場所の違いによる優先度
記述場所により、あとから書いた指定で上書きできない場合があります。
3つの記述場所による優先度は以下のようになります。
要素タグ内 > head内 > cssファイル
要素のタグ内に書くのがもっとも高いですね。
なので、3つの記述場所で違う文字色をpタグに指定すると、緑色になります。
<head>
⌇
<style>
p {
color: blue;
}
</style>
</head>
<!-- head内 -->
<body>
<p style="color: green;">スタイルの優先度を教えてー</p>
<!-- 要素タグ内 -->
p {
color: red;
}
/* cssファイル */
スタイルの優先度を教えてー
これを検証画面で確認してみましょう。

「element.style」がpタグ内に書いた指定。
※element = 要素
「index.html」がhead内、「style.css」がcssファイルです。
先ほど見た通りの優先度になっていますね。
要素タグ内 > head内 > cssファイル
参考サイト
この「セレクタの点数化」は、CSS3をもとに紹介しました。
CSS3とは、cssのルールブックみたいなもので、その最新版です。
どちらも翻訳あります。
やや専門的に書かれてるので、お気をつけを〜
まとめ
仕事をし出すと、点数化しながら指定する機会が増えるはずです。
その時は「クラスが10点で要素が1点で」ってふうに思い出してみてください。