【CSS】初心者必見!セレクタの優先度を理解しよう!

基本的なCSSの優先度は、記述順序で決まります。
後に記述されたCSSが前のCSSより優先されます。


span {
    color: red;
}

span {
    color: blue;
}
    

この様なコードが記述されている場合、span要素のテキストは青色になります。
これは、color: red;よりcolor: blue;が後に記述されていることで、前のredを上書きしているためです。

次のコードを見てください。


<link rel="stylesheet" href="styleA.css">
<link rel="stylesheet" href="styleB.css">
    

外部からスタイルシート(CSSファイル)を読み込んでいる場合でも、styleA.cssより後に記述されているstyleB.cssが優先されます。

これらの例のように、CSSの基本的な優先度は記述順序で決まります

理解度チェック

  • CSSの基本的な優先度について説明してください。

セレクタの優先度(詳細度)について

CSSの基本的な優先度は記述順序で決まりますが、これだけで優先度が決まると多人数で開発する場合や外部スタイルシートを複数読み込む場合などに混乱をきたします。

ここで学習するセレクタの詳細度は、CSSの記述順序に関係なくセレクタの書き方でCSSの優先度を決定づけるものです

セレクタ 説明 点数(優先度)
インラインスタイル 要素に直接記述するため一番点数が高い。 1000点
IDセレクタ 特定の要素を指定するため点数は高い。 100点
クラスセレクタ・属性セレクタ・擬似クラス これらのセレクタは複数の要素を指定できるるため点数は低め。 10点
要素セレクタ・疑似要素 より複数の要素を指定できるため低い。 1点
ユニバーサルセレクタ・コンビネータ・否定擬似クラス *+>~:notを使用したセレクタは点数に影響を与えない。 0点

この表のように、優先度はセレクタの点数によって判定されます

また、子孫クラスを使用して要素セレクタを2回使用している場合は点数が加算されます。


div p {
    color: red;
}

p {
    color: blue;
}
        

上記の例では、p要素のセレクタでは1点、子孫セレクタのdiv pは要素セレクタを二つ使用しているので2点となります。

また、セレクタでは次のように書くことができます。


div.text-red#textBox {
    font-size: 32px;
}
    

空白無しで各セレクタを繋げることで「div要素でclass属性にtext-redid属性にtextBoxが設定されている要素」をセレクタに指定していることになります。

このセレクタの点数は、要素セレクタ(1点) + クラスセレクタ(10点) + IDセレクタ(100点)で111点となります

理解度チェック

  • セレクタの優先度と計算方法について理解しましょう!
  • 33点でセレクタを指定するためにはどうすればいいでしょうか?
  • 各セレクタを繋ぎ、300点以上のセレクタで指定するためにはどうすればいいでしょうか?

優先度最高峰のインラインスタイル

style属性を使用するインラインスタイルは点数が1000点です。


<p style="color: red;">
    こんにちは
</p>
    

このp要素にはインラインスタイルが設定されているので、外部のセレクタ詳細度が1000点を上回らない限り、赤色から他の色に変更できません。

そのため、このインラインスタイルはよく考えて使用するように心がけましょう。

理解度チェック

  • インラインスタイルを使う場合に気をつける点を説明してください。

インラインスタイルを上書きする

点数が1000点のインラインスタイルを外部から上書きする方法があります。


<p style="color: red;">
    こんにちは
</p>
    

このp要素がbody要素の直下に存在する場合、セレクタの優先度を使用して上書きすることは実質不可能(可能ではあるが現実的ではない)です。

しかし、!importantを末尾に指定することで強制的にスタイルを上書きすることができます。


p {
    color: blue !important;
}
    

上記のように!importantを値の末尾に使用します。
すると、インラインスタイルより!importantが指定されているスタイルが優先的に反映されるため、青色の「こんにちは」が表示されます。

理解度チェック

  • !importantを使用する場面について説明してみてください。

CSS優先度クイズ

次のセレクタの優先度で一番高いセレクタを選択してください。

クイズ1


div {
    color: blue;
}

div {
    color: red;
}
    

div要素の文字色は何色になりますか?

答え 赤色.

クイズ2


#container div {
    color: red;
}

div.greeting {
    color: blue;
}
    

<div id="container">
    <div class="greeting">
        こんにちは
    </div>
</div>
    

「こんにちは」は何色になるでしょうか?

答え 赤色.

クイズ3


#container div {
    color: red;
}

div.greeting {
    color: blue !important;
}
        

<div id="container">
    <div class="greeting">
        こんにちは
    </div>
</div>
    

「こんにちは」は何色になるでしょうか?

答え 青色.

理解度チェック

  • 優先度について理解できましたか?
  • 答えは上から、赤色、赤色、青色。

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。