指定が上書きされない! 〜id・class・点数化〜

【css】指定が上書きされない|id・class・点数化

あとから書いた指定が効かなかった経験はありませんか?

原因はセレクタの点数化によるものです。

どういうことなのか、さっそく解説に行きましょう!

セレクタには点数が付いている

まずはセレクタの確認です。

<h2>がセレクタですね。

セレクタ(selector) = 選択なので、いろいろある要素の中から<h2>を選んで指定するみたいな意味です。

日本語に置き換えると理解しやすいかもしれません。

で、おもな3つのセレクタとは以下になります。

  • 要素セレクタ
  • classセレクタ
  • idセレクタ

これは大丈夫ですね。

そして、この優先度が『id > class > 要素』というのも、たぶんご存知かと思います。

<h2 id="heading" class="heading">赤いままだぞー!</p>
#heading {
  color: red;
}
.heading {
  color: blue;
}

赤いままだぞー

あとに書いた.headingが効いてません。

で、なぜこうなるかと言えば、どのセレクタで指定するかによって点数が決まっているからです。

各セレクタの点数

セレクタにはidやclass以外にもあり、以下のように点数化されています。

セレクタ点数
要素1div
擬似要素1::before
擬似クラス10:hover
class10.sample
id100#sample
タグ内への直接指定1000style=””

点数化されているので、同じ要素に指定の上書きをしようと思ってもできないケースが出てくるのです。

例えば、こんな感じです。

<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
class10
id100
タグ内への直接指定1000
計算例合計点
section div p3
h2.heading11
h1#id101
section div .heading12
.heading::hover20
<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点で」ってふうに思い出してみてください。

タイトルとURLをコピーしました