新型コロナウイルス感染症(COVID-19)対策のため、教室ではマンツーマンレッスンのみを受付。※オンライン講座は随時受け付けております。

CSSは「点数」を持っていて、「優先順位」が生まれる

通常CSSで書いた命令は、下に書いたものが優先されます。

例えば下記のようなHTMLファイルがあったとします。

<section class="contents">
    <h1>就職 咲子 ポートフォリオ</h1>
</section>

「就職 咲子 ポートフォリオ」という文字に色(#ff0000 赤)を付ける命令をしたとします。

.contents h1{
    color: #ff0000;
}

ところが間違えて、もう一度下に同じ場所に同じく文字の色(#d92477 ピンク)を命令をしたとします。

.contents h1{
    color:#ff0000;
}
・
・
・
・
・
.contents h1{
    color:#d92477;
}

この場合は下に書いたピンク色(#d92477 ピンク)が反映され、文字の色はピンク色に表示されます。
この場合は下に書いたものが単純に反映されるのですが、そうではない場合もあります。たとえばこんなとき。

のアイコン画像

そうだ!
やっぱりh1にclass名をつけよう!

<section class="contents">
    <h1 class="title">就職 咲子 ポートフォリオ</h1>
</section>

と、こんなふうにHTMLを変えました。

のアイコン画像

そうだ!
文字の色はやっぱり青(#252cd9)がいい!

こう思って下記のようなCSSを書き足しました。
元々書いていたものを消さずに、下の方に書き足したとします。

.contents h1{
    color:#ff0000;
}
.contents h1{
    color:#d92477;
}
・
・
・
・
・
.title{
    color:#252cd9;
}

本来であれば一番下のCSSが効いているはずですが、プレビューで表示されているのはピンク色(#d92477)です。
これは「CSSには持ち点があって、たとえ下に書いていても持ち点が負けていれば上の命令が反映される」というルールがあるからです。

.contents h1 の持ち点は11点
.title の持ち点は10点

1点差で負けているのです。

セレクタ点数
id#title100点
class.content10点
要素h11点
疑似クラス・疑似要素:last-child1点

持ち点の計算はこちらのサイトが便利
計算ツール http://specificity.keegan.st/

CSSを命令したときに反映されていない場合は「検証」でしっかり確認しましょう。

Chromeの検証で点数を調べる
GoogleChrome 検証機能のパネル

下に書いたはずのものが、斜線が引かれているということは、優先順位が負けているということです。
「あれ、指定したのに反映されていない!?」と思ったら点数を確認してみましょう。
はじめは何度もこれに躓くかもしれませんが、慣れてくれば優先順位が同じか勝つような書き方ができます!

おまけ。
昔のウェブサイトでよく見かける、点数の計算が大変なCSSの書き方…

section div.contents h2.subtitle{

}

何点やねん。となりますね。

以上、CSSの点数と優先順位のおはなしでした。

この記事を書いた人

[経験]
・制作(Photoshop・Illustrator/HTML・CSS・jQuery・WordPress)
・アクセス解析/SEOライティング/運用改善/企画提案
・講師(職業訓練校/スクール/企業出向)
[活動]
大阪・東京でWeb制作を中心に活動。
また「拡げるキッカケを共創する」を活動指針として
①未来を切り開くスキル習得サポート、②自立したウェブサイト運用のアシスト、を行う。

目次
閉じる