HTML実践学習18 スタイル優先度

ITリテラシー学習
ITリテラシー学習

CSSに複数のスタイルが同じ箇所にある場合何が優先されるのかを説明していきます。

スタイルの優先度

セレクタにはそれぞれ点数が付いており、高い点数のセレクタで記述されているスタイルが優先されます。点数まで考えると複雑になりますので、下記の基本的なルールを覚えておきましょう。

(1)後に書かれたスタイルが優先

1つのソース内に同じ要素に対して2つ以上のスタイルの記述がある場合は、ソースの一番下にあるスタイルが優先されます。下記の場合は背景色が赤になります。

p {
  background: blue;
  background: red;
}

(2)idセレクタ>classセレクタ>タイプセレクタ

一つの要素に対して「idセレクタ」「classセレクタ」「タイプセレクタ」のスタイルの記述がある場合は、「idセレクタ>classセレクタ>タイプセレクタ」の優先度となります。下記の場合は背景色は黄色になります。(classとidはhtml上でp要素に指定しているとする)

.classselect {
  background: blue;
}

p {
  background: red;
}

#idselect {
  background: yellow;
}

(3)全称セレクタ

全称セレクタ(*アスタリスク)で全要素に対してスタイルを記述する場合は、何よりも優先度が低くなります。

(4)インラインスタイルシート

html内のタグにスタイルを直書きしたインラインCSSは、セレクタで指定したスタイルよりも優先されます。

(5)!important宣言

!important宣言をしたファイルは何よりも優先されます。下記の場合は赤色の背景になります。

.classselect {
  background: blue;
}

p {
  background: red !important;
}

まとめると優先度は下記のようになります。(上から優先度が高い順)

!important宣言
インラインスタイルシート
idセレクタ
classセレクタ
タイプセレクタ
全称セレクタ

ただし「!important宣言」は、なるべく多用しないようにしましょう。「!important宣言」がサイトに多く存在してしまうと、メンテナンスが困難になってしまうためです。
この他にも「擬似クラス」や「擬似要素」に指定した場合の優先度や、親要素との組み合わせでも点数が変わります。少しづつ覚えていきましょう。

POINT

スタイルの優先度はセレクタの種類や記述方法によって変わります。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

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