知っておきたいCSS セレクタの優先順位・詳細度・継承

知っておきたいCSSセレクタの優先順位・詳細度・継承

今回は、知っておきたいCSS セレクタの優先順位・詳細度・継承についてご紹介します。
 

もくじ

以下は本記事のもくじです。
 

  1. 1.CSS セレクタとは
    1. 1-1. ユニバーサルセレクタ
    2. 1-2. 要素セレクタ
    3. 1-3. classセレクタ
    4. 1-4. idセレクタ
    5. 1-5. 各セレクタの組み合わせ
  2. 2.セレクタの優先順位と詳細度
    1. 2-1. 優先順位の比較例
    2. 2-2. セレクタの優先順位・詳細度の計算方式
    3. 2-3. さらに優先順位の高いインラインスタイルシート形式と!important
  3. 3. スタイルの継承
  4. 4. Chromeの検証機能でスタイルの優先順位を確認する
  5. 5. まとめ


 
それでは説明していきます。
 

1. CSS セレクタとは

内部スタイルシートや外部スタイルシートで記述するCSSは、下記のように記述します(下記は内部スタイルシート形式)。

CSSセレクタ CSSの書き方
 

上記のセレクタとはスタイルを適用する対象のことです。
 

h1などのHTML要素のほかHTMLタグのid属性やclass属性、他にも任意の属性などを指定することができます。
 

よく使うセレクタとして、以下の4種類があります。

  • ユニバーサルセレクタ
  • 要素セレクタ
  • classセレクタ
  • idセレクタ

 
 

1-1. ユニバーサルセレクタ

ユニバーサルセレクタとは、すべての要素に対してスタイル指定したものです。
 

CSS側では、下記のように指定します。

*{ CSSプロパティ:値; }

 

例 *(全ての要素)に対してスタイルを設定

 

ユニバーサルセレクタを利用すると全ての要素に対してスタイルを指定することができます。
 

1-2. 要素セレクタ

要素セレクタとは、html要素名に対してスタイル指定したものです。
 

CSS側では、下記のように指定します。

要素名{ CSSプロパティ:値; }

 

例 h1要素に対してスタイルを設定

 

ある要素の共通設定をする際などは要素セレクタを使うと便利です。
 

反面、複数のp要素のうち特定の箇所だけという場合は要素セレクタだけでは難しいので、classセレクタなどを利用してスタイルを指定する必要があります。
 
 

1-3. classセレクタについて

classセレクタとは、htmlタグのclass属性に対してスタイル指定したものです。
 

HTML側では、開始タグで<h1 class=”任意のクラス名”>のように記述します。
 

CSS側では、下記のように指定します。

.class名{ CSSプロパティ:値; }

 

例 class名がsampleの要素に対して、スタイルを設定

 
上記のように、クラス名で指定することで、h1,pなどの要素名を問わずスタイルを指定することができます。
 
 

1-4. idセレクタについて

idセレクタとは、htmlタグのid属性に対してスタイル指定したものです。
 

HTML側では、開始タグで<h1 id=”任意のID名”>のように記述します。
 

CSS側では、下記のように指定します。

#id名{ CSSプロパティ:値; }

 

例 h1タグのid属性(test)に対して、スタイルを設定

 

なお、id名はHTMLファイルの中で一意でないといけない(同じID名を2回以上書いてはいけない)のに対して、class属性は上記例のように同じclass名で複数回書くことができます。
 
 

各セレクタを組み合わせてスタイルを設定する

さて、これまで、ユニバーサルセレクタ、要素セレクタ、classセレクタ、idセレクタについてそれぞれ説明してきました。
 

これまでは、要素セレクタ、classセレクタ、idセレクタを単体で指定していましたが、それぞれのセレクタを組み合わせて指定することもできます。
 

ここでは参考までに、そのほかのセレクタの組み合わせ方とあわせて紹介しておきます。
 

あるセレクタをx、もう一方のセレクタをyとするとき、下記のような組み合わせがよく使われます。

方法 意味
x y{ … }  ※xとyに半角スペースあり xで指定した要素の中のy
xy{ … }  ※xとyに半角スペースなし xかつyの要素
x,y{ … }  ※xとyにカンマあり xおよびyの要素
x>y{ … }  ※xとyに>あり xの要素直下にあるyの要素

 

例1. 要素セレクタを組み合わせる(x y{…})

「header h1」のようにセレクタ間で半角スペースを空けると、hedear要素の中にあるh1要素という意味になります。
 

■設定例

 

■表示例
下記のように、header要素の中のh1に赤色が適用されて、header要素の外のh1は赤色が適用されません。
header h1{color:red;}でheader要素の中のh1要素を赤文字にする
 
 

例2. 要素セレクタとクラスセレクタを組み合わせる(x y{…})

同様に、x y{…}の例で、要素セレクタとクラスセレクタを組み合わせた例を挙げてみます。
 

今回は、「header .sample{…}」のように、header要素のsampleクラスを指定する例です。
 

■設定例

 

■表示例
本例だと、h1要素・p要素関係なく、header要素の中で、class=”sample”と書いてあるものが赤色になりました。
header .sample{color:red;}でheader要素の中のclass名がsampleの要素を赤文字にする
 
 

例4.div要素とclassセレクタを組み合わせる(xy{…}※スペースを空けない)

 
つぎに、xy{…}半角スペースを空けない例をみてみます。

今回は、div.container{ … }のように、セレクタ間で半角スペースを空けずに記述すると、div要素でかつclass名がcontainerがついている要素という意味になります。
 

■設定例

 

■表示例
div要素でかつclass=”container”がついている場合は背景がピンク色になりましたが、div要素の中のclass=”container”はスタイルが設定されていないことがわかります。
div.container{background:pink;}でdiv要素かつclass名がcontainerの要素の背景をピンク色にする

 
 

2. CSS セレクタの優先順位と詳細度

さて、次にCSSセレクタの優先順位と詳細度について、説明していきます。
 

たとえば、下記のように要素セレクタとclassセレクタで相反する設定をしている場合、h1要素に設定したスタイル(赤色)か、class属性に設定したスタイル(青色)かどちらになるのでしょうか。
 

例 h1要素に対して赤色を設定、class名がsampleの要素に対して青色を設定

 

■表示例
今回の例では、class名が優先されて下記のように青文字になります。
h1要素でクラス名がsampleがついているタグに対して、赤色と青色のどちらが優先されるか
 
 

セレクタには優先順位があり、基本的なルールは下記のような順番になります。
 

  1. !important
  2. インラインスタイルシート形式
  3. IDセレクタ
  4. クラスセレクタ、属性セレクタ
  5. 要素セレクタ
  6. ユニバーサルセレクタ(*)

 

上が最も優先順位が高くて、下に行くほど優先順位が低くなります。
 

考え方の基本としては、「より明示的に設定したスタイルが優先される」というルールになります。
 
 

2-1. 優先順位の比較例

 

ユニバーサルセレクタ(*)と要素セレクタ

  1. !important
  2. インラインスタイルシート形式
  3. IDセレクタ
  4. クラスセレクタ、属性セレクタ
  5. 要素セレクタ
  6. ユニバーサルセレクタ(*)

 

まずは、比較的優先順位が低いもの同士のユニバーサルセレクタと要素セレクタで比較してみましょう。
 

■例. ユニバーサルセレクタと要素セレクタの設定例
ユニバーサルセレクタ(*)で文字を赤色に、要素セレクタ(h1)で文字を青色に設定している例です。
 

 

ユニバーサルセレクタ(*)で設定した赤か、要素セレクタ(h1)で設定した青かどちらが優先されているでしょうか?
 
 

■表示結果
表示結果です。ユニバーサルセレクタ(*)よりも要素セレクタ(h1)が優先されて青色になりました。
ユニバーサルセレクタ(*)よりも要素セレクタ(h1)が優先されて青色になりました。
 

ユニバーサルセレクタは全要素(*)に対して設定する抽象度の高い指定方法に対して、要素セレクタに指定した方がより明示的な指定方法になるので要素セレクタが優先されています。
 
 

要素セレクタとclassセレクタで比較

 

  1. !important
  2. インラインスタイルシート形式
  3. IDセレクタ
  4. クラスセレクタ、属性セレクタ
  5. 要素セレクタ
  6. ユニバーサルセレクタ(*)

 

次に要素セレクタとclassセレクタを比較した例です。
 

■要素セレクタ(h1)で文字を青色に、classセレクタ(.sample)で文字を黄色に設定している例

 
 

要素セレクタ(h1)で設定した青色か、classセレクタ(.sample)で設定した黄色かどちらが優先されているでしょうか?
 
 

■表示結果
表示結果です。要素セレクタ(h1)よりもクラスセレクタ(.sample)が優先されて、黄色になりました。

セレクター 優先順位 検証結果 classセレクタが適用された
 
 

classセレクタとidセレクタで比較

 

  1. !important
  2. インラインスタイルシート形式
  3. IDセレクタ
  4. クラスセレクタ、属性セレクタ
  5. 要素セレクタ
  6. ユニバーサルセレクタ(*)

次に、classセレクタとidセレクタで比較した例です。
 

■classセレクタ(.sample)で文字を黄色に、idセレクタで文字を赤色に設定している例
 

 

classセレクタ(.sample)か、idセレクタ(#test)で設定した赤色かどちらが優先されているでしょうか?
 
 

■classセレクタとidセレクタの比較結果
結果です。idセレクタ(#test)で指定した赤色が優先されて赤色になりました。
 

CSSの優先順位 idとclass
 
 

このように、id、class、要素、ユニバーサルセレクタでは、優先順位にそって、スタイルが適用されることを確認しました。
 

 

2-2. セレクタの詳細度について

インラインスタイルシート形式、!important指定について解説する前に、要素セレクタ、CLASSセレクタ、IDセレクタ同士での優先順位詳細度の計算方法について紹介します。
 

優先順位・詳細度の計算方式として、以下のようにカウントアップして詳細をを決定するという考え方があります。

IDセレクタ、クラスセレクタ、要素セレクタを設定します。

  • (a)idセレクタを3桁目の数字
  • (b)クラスセレクタを2桁目の数字
  • (c)要素セレクタを1桁目の数字

 

上記のように考えた場合、たとえば

(1) hedaer h1{color:red;} で指定している場合、詳細度は「0.0.2」と算出します。

(2) .sample h1{color:blue;}で指定している場合、詳細度は「0.1.1」と算出します。

(3) #message{color:green} で指定している場合、詳細度は「1.0.0」と算出します。
 

この中だと(3)がもっとも数字が大きいので#message{color:green}が優先されます。
 

(a)100円、(b)10円、(d)1円のように考えるとわかりやすいかもしれません。
 

ただし、桁の小さいセレクタをたくさん組み合わせていても、より桁が大きいセレクタが指定されていればそちらが優先されますのでご注意ください。
 

.sample1.sample2.sample3…..sample10{color:blue;}の場合は詳細度「0.10.0」となります。

#message{color:green;}の場合は詳細度「1.0.0」となります。

ここでは、「1.0.0」の#message{color:green;}が優先されます。
 

なお、同じ優先度・詳細度のセレクタで競合する場合はCSSファイルのうち、より下に記述してある方が優先されます。
 
 

2-3. さらに優先順位の高い記述方法 インラインスタイルシート形式と!important

  1. !important
  2. インラインスタイルシート形式
  3. IDセレクタ
  4. クラスセレクタ、属性セレクタ
  5. 要素セレクタ
  6. ユニバーサルセレクタ(*)

つぎに、要素セレクタ、クラスセレクタ、IDセレクタなどよりも優先順位の高い書き方「インラインスタイルシート形式と!important」について説明します。
 

<h1 style=”color:red”>のようにインラインスタイルシート形式で書くと、要素セレクタ,CLASSセレクタ,IDセレクタで設定した内容よりも優先されます。
 

さらに優先順位の高い書き方があり、h1{color:red!important;}のようにCSSの値に「!important」をつけるとここで設定した値がもっとも優先されます。
 

いくつか例をあげてみます。
 

インラインスタイルシート(tyle=””)とidセレクタを比較

 

インラインスタイルシート形式でタグに直接「style=””」で書き込んでいる形式と、先ほどのidセレクタで指定している形式の優先順位の比較です。
 

■style=”color:aqua”でインラインスタイルシート形式で水色を指定、idセレクタでは赤色を指定している例
 

 

インラインスタイルシート(style=”color:aqua”)で設定した水色か、idセレクタ(#test)で設定した赤色かどちらが優先されているでしょうか?
 
 

■表示結果
結果です。idセレクタ(#test)で設定した赤色よりも、インラインスタイルシート(style=”color:aqua”)で設定した水色が優先されて水色になりました。
 
CSSの優先順位 style=""(インラインスタイルシート) とidセレクタ
 
 

インラインスタイルシートと!importantを比較した場合

さらに、インラインスタイルシート形式と最も優先順位の高い!importantでみてみます。
 
インラインスタイルシート(style=”color:aqua”)で設定した水色とidセレクタ(#test)に!importantを付け加えた赤色で比較してみます。
 

■設定例

 

■比較結果
結果は、もっとも優先される!importantが適用されて赤色になりました。
CSSの優先順位 style=""(インラインスタイルシート) と!important
 
 

なお、!importantをつけたセレクタ同士が競合する場合は、!importantをつけているセレクタの中同士でどちらがより詳細な記述かでまた優先順位が決まります。

たとえば、style=”color:red!important”のようなインライン+!importantのような記述をするとほかの箇所で書いたいかなる設定よりも強くなります(保守性の面で推奨されない書き方です)。
 
 

3. スタイルの継承

つづいて、スタイルの継承について紹介します。
 

ある要素に適用したスタイルは、その要素の中の要素(子要素)に自動的に引き継がれるという特徴があります。
 

たとえば、body{color:red;}と指定すると、body要素内のh1やpなどの子要素もスタイルを継承して赤色になります。
 

 
 

ただし、すべての値が継承されるわけではないことに注意してください。
 

たとえばフォント系(color,font-family,font-size)などは継承されますが、枠線(border)、外部余白(margin)、内部余白(padding)などは自動的には引き継がれません。
 

また、引き継がれたスタイルの優先順位はとても低く、さきほどの詳細度の計算と混同しないように注意して下さい。
 

たとえば、body{color:red!important;}とh1{color:blue;}がある場合何色になるでしょうか?
 

!importantがあるから最優先で赤色になると思うかもしれませんが!importanをつけているのはbody要素であって、p要素には優先度の低い継承された赤色設定がされているだけで、h1要素に直接青色指定した方がより明示的なので青色になります。
 

 

■表示結果
body{color:red!important}とh1{color:blue}の比較結果
 
 

4.Chromeの検証機能でスタイルの優先順位を確認する

さいごに、Chromeの検証機能によるスタイルの優先度の確認方法について紹介します。
 

実際にウェブページを作成すると、たくさんのスタイルが競合しあって、どれが優先されているのかわかりづらいときがあります。
 

そういう場合は、Chromeの検証機能(Chromeで指定のウェブページを開いて右クリック>検証)を利用すると、自分の確認したい要素にどのようなスタイルが適用されているか確認することができます。
 

Chromeの検証機能 #testが優先されて緑色になっていることがわかります

 

上記例では、#testが優先されて緑色になっていることがわかります。
 
 

i5まとめ

まとめです。

CSSの優先順位・詳細度をまとめると下記のようになります。

  1. !important
  2. インラインスタイルシート(style=””)
  3. IDセレクタ
  4. クラスセレクタ、属性セレクタ
  5. 要素セレクタ
  6. ユニバーサルセレクタ(*)

 

また、継承という特性と、Chromeの検証機能を紹介しました。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 
 

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 継続6ヶ月コースとお試し1ヶ月コースから選択して受講できます。

継続6ヶ月コース

通常 15万円【2017年中】12万円(税抜)
ホームページ作成からWeb集客まで一通り習得したい方向けのコースです。

お試し1ヶ月コース

通常3万円【2017年中】2万円(税抜)
特定範囲のみ習いたい・まずは試しに受講してみたい方向けのコースです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ