CSSの優先順位

ツイート
2021年07月18日
2021年07月19日

HTML要素は、複数のCSSルールで設定できます。

html
<p id="proverb" class="message"> 何の為に生まれて、何をして生きるのか、答えられないなんてそんなのは嫌だ </p>

何の為に生まれて、何をして生きるのか、答えられないなんてそんなのは嫌だ

タグ名の使用

css
p { color: blue; }

.classの使用

css
.message { color: green; }

#idの使用

css
#proverb { color: red; }

ブラウザは<p> </p>に1つの色しか設定できないため、CSSに優先順位を付けて選択します。

上記の例では、#id が最も優先されるため、パラグラフの色は赤になります。

CSSルールの順序

同様のセレクターがCSSにある場合、最後に定義されたセレクターが優先されます。

css
p { color: green; } p { color: red; } /* Paragraphs will be red */

100小節

CSSルールがどれほど「強力」であるかを理解する簡単な方法の1つは、セレクターの特異性を測定することです。

指定方法評価値
#id100
.class10
タグ1
Inline Styles1000
属性セレクタ(p[title])10
擬似要素(p::before)1
ユニバーサルセレクタ(*)0
!important最上位。同列の場合、評価値計算
  • #id セレクターは100の価値があります
  • .class セレクターは10の価値があります
  • tag セレクターは1の価値があります

CSSルールが表示される順序に関係なく、「スコア」が最も高いセレクターが優先されます。

html
#introduction{ color: red;} .message{ color: green;} p{ color: blue;} <p class="message" id="introduction"> MarkSheet is a free HTML and CSS tutorial. </p>

競合を回避する方法

CSSを作成しているときに、同じプロパティが複数回適用される競合するルールを作成するのは簡単です。

それを回避するには:

  • クラスのみを使用する: #idでstyleを設定しない。
  • 単一のHTML要素に複数のクラスを適用することは避けてください。記述せず<p class="big red important">、<p class="title">より意味的に説明的なものにします。
  • 次のようなインラインスタイルを使用しないでください<div style="background: blue;">
  • !importantを使用しない。