あとから書いた指定が効かなかった経験はありませんか？
原因はセレクタの点数化によるものです。
どういうことなのか、さっそく解説に行きましょう！
セレクタには点数が付いている
まずはセレクタの確認です。
<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点で」ってふうに思い出してみてください。