今回は、知っておきたいCSS セレクタの優先順位・詳細度・継承についてご紹介します。
【HTML・CSSを個別指導】
Webスクール<「WEBST8」
CSSセレクタとは
内部スタイルシートや外部スタイルシートで記述するCSSは、下記のように記述します（下記は内部スタイルシート形式）。
上記のセレクタとはスタイルを適用する対象のことです。
h1などのHTML要素のほかHTMLタグのid属性やclass属性、他にも任意の属性などを指定することができます。
よく使うセレクタとして、以下の4種類があります。
- ユニバーサルセレクタ
- 要素セレクタ
- classセレクタ
- idセレクタ
ユニバーサルセレクタ
ユニバーサルセレクタとは、すべての要素に対してスタイル指定したものです。
CSS側では、下記のように指定します。
例 *(全ての要素)に対してスタイルを設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSSセレクタ</title> <style media="screen"> *{ color: pink; } </style> </head> <body> <h1>ユニバーサルセレクタ</h1> <p>*(アスタリスク)で指定</p> </body> </html> |
■表示例
ユニバーサルセレクタを利用すると全ての要素に対してスタイルを指定することができます。
要素セレクタ
要素セレクタとは、html要素名に対してスタイル指定したものです。
CSS側では、下記のように指定します。
例 h1要素に対してスタイルを設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSSセレクタ</title> <style media="screen"> h1{ color: green; } </style> </head> <body> <h1>要素セレクタ</h1> </body> </html> |
■表示例
ある要素の共通設定をする際などは要素セレクタを使うと便利です。
反面、複数のp要素のうち特定の箇所だけという場合は要素セレクタだけでは難しいので、classセレクタなどを利用してスタイルを指定する必要があります。
classセレクタについて
classセレクタとは、htmlタグのclass属性に対してスタイル指定したものです。
HTML側では、開始タグで<h1 class="任意のクラス名">のように記述します。
CSS側では、下記のように指定します。
例 class名がsampleの要素に対して、スタイルを設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSSセレクタ</title> <style media="screen"> .sample{ color:blue; } </style> </head> <body> <h1 class="sample">CLASSセレクタ</h1> <p class="sample">クラスセレクタです</p> </body> </html> |
■表示例
上記のように、クラス名で指定することで、h1,pなどの要素名を問わずスタイルを指定することができます。
idセレクタについて
idセレクタとは、htmlタグのid属性に対してスタイル指定したものです。
HTML側では、開始タグで<h1 id="任意のID名">のように記述します。
CSS側では、下記のように指定します。
例 h1タグのid属性(test)に対して、スタイルを設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSSセレクタ</title> <style media="screen"> #test{ color:red; } </style> </head> <body> <h1 id="test">IDセレクタ</h1> </body> </html> |
■表示例
なお、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要素という意味になります。
■設定例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのHTML</title> <style media="screen"> header h1{ color:red; } </style> </head> <body> <header> <h1>header要素の中のh1</h1> </header> <h1>header要素の外のh1</h1> </body> </html> |
■表示例
下記のように、header要素の中のh1に赤色が適用されて、header要素の外のh1は赤色が適用されません。
例2. 要素セレクタとクラスセレクタを組み合わせる(x y{...})
同様に、x y{...}の例で、要素セレクタとクラスセレクタを組み合わせた例を挙げてみます。
今回は、「header .sample{...}」のように、header要素のsampleクラスを指定する例です。
■設定例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのHTML</title> <style media="screen"> header .sample{ color:red; } </style> </head> <body> <header> <h1>header要素の中のh1</h1> <h1 class="sample">header要素の中のclass="sample"のh1</h1> <p class="sample">header要素の中のclass="sample"のp</p> </header> </body> </html> |
■表示例
本例だと、h1要素・p要素関係なく、header要素の中で、class="sample"と書いてあるものが赤色になりました。
例4.div要素とclassセレクタを組み合わせる(xy{...}※スペースを空けない)
つぎに、xy{...}半角スペースを空けない例をみてみます。
今回は、div.container{ ... }のように、セレクタ間で半角スペースを空けずに記述すると、div要素でかつclass名がcontainerがついている要素という意味になります。
■設定例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのHTML</title> <style media="screen"> div.container{ background: pink; } </style> </head> <body> <div class="container"> div要素かつclass名がcontainerの要素 </div> <div> <p class="container">div要素の中のclass名がcontainerの要素</p> </div> </body> </html> |
■表示例
div要素でかつclass="container"がついている場合は背景がピンク色になりましたが、div要素の中のclass="container"はスタイルが設定されていないことがわかります。
CSS セレクタの優先順位と詳細度
さて、次にCSSセレクタの優先順位と詳細度について、説明していきます。
たとえば、下記のように要素セレクタとclassセレクタで相反する設定をしている場合、h1要素に設定したスタイル(赤色)か、class属性に設定したスタイル(青色)かどちらになるのでしょうか。
例 h1要素に対して赤色を設定、class名がsampleの要素に対して青色を設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのHTML</title> <style media="screen"> h1{color:red;} .sample{color:blue;} </style> </head> <body> <h1 class="sample">h1要素でクラス名がsample</h1> </body> </html> |
■表示例
今回の例では、class名が優先されて下記のように青文字になります。
セレクタには優先順位があり、基本的なルールは下記のような順番になります。
- !important
- インラインスタイルシート形式
- IDセレクタ
- クラスセレクタ、属性セレクタ
- 要素セレクタ
- ユニバーサルセレクタ(*)
上が最も優先順位が高くて、下に行くほど優先順位が低くなります。
考え方の基本としては、「より明示的に設定したスタイルが優先される」というルールになります。
優先順位の比較例
ユニバーサルセレクタ(*)と要素セレクタ
- !important
- インラインスタイルシート形式
- IDセレクタ
- クラスセレクタ、属性セレクタ
- 要素セレクタ
- ユニバーサルセレクタ(*)
まずは、比較的優先順位が低いもの同士のユニバーサルセレクタと要素セレクタで比較してみましょう。
■例. ユニバーサルセレクタと要素セレクタの設定例
ユニバーサルセレクタ(*)で文字を赤色に、要素セレクタ(h1)で文字を青色に設定している例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS詳細度の確認</title> <style media="screen"> *{ color:red; } h1{ color:blue; } </style> </head> <body> <h1>何色が適用されるか</h1> </body> </html> |
ユニバーサルセレクタ(*)で設定した赤か、要素セレクタ(h1)で設定した青かどちらが優先されているでしょうか？
■表示結果
表示結果です。ユニバーサルセレクタ(*)よりも要素セレクタ(h1)が優先されて青色になりました。
ユニバーサルセレクタは全要素(*)に対して設定する抽象度の高い指定方法に対して、要素セレクタに指定した方がより明示的な指定方法になるので要素セレクタが優先されています。
要素セレクタとclassセレクタで比較
- !important
- インラインスタイルシート形式
- IDセレクタ
- クラスセレクタ、属性セレクタ
- 要素セレクタ
- ユニバーサルセレクタ(*)
次に要素セレクタとclassセレクタを比較した例です。
■要素セレクタ(h1)で文字を青色に、classセレクタ(.sample)で文字を黄色に設定している例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS詳細度の確認</title> <style media="screen"> h1{ color:blue; } .sample{ color:yellow; } </style> </head> <body> <h1 class="sample">何色が適用されるか</h1> </body> </html> |
要素セレクタ(h1)で設定した青色か、classセレクタ(.sample)で設定した黄色かどちらが優先されているでしょうか？
■表示結果
表示結果です。要素セレクタ(h1)よりもクラスセレクタ(.sample)が優先されて、黄色になりました。
classセレクタとidセレクタで比較
- !important
- インラインスタイルシート形式
- IDセレクタ
- クラスセレクタ、属性セレクタ
- 要素セレクタ
- ユニバーサルセレクタ(*)
次に、classセレクタとidセレクタで比較した例です。
■classセレクタ(.sample)で文字を黄色に、idセレクタで文字を赤色に設定している例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS詳細度の確認</title> <style media="screen"> #test{ color:red; } .sample{ color:yellow; } </style> </head> <body> <h1 id="test" class="sample">何色が適用されるか</h1> </body> </html> |
classセレクタ(.sample)か、idセレクタ(#test)で設定した赤色かどちらが優先されているでしょうか？
■classセレクタとidセレクタの比較結果
結果です。idセレクタ(#test)で指定した赤色が優先されて赤色になりました。
このように、id、class、要素、ユニバーサルセレクタでは、優先順位にそって、スタイルが適用されることを確認しました。
セレクタの詳細度について
インラインスタイルシート形式、!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ファイルのうち、より下に記述してある方が優先されます。
さらに優先順位の高い記述方法 インラインスタイルシート形式と!important
- !important
- インラインスタイルシート形式
- IDセレクタ
- クラスセレクタ、属性セレクタ
- 要素セレクタ
- ユニバーサルセレクタ(*)
つぎに、要素セレクタ、クラスセレクタ、IDセレクタなどよりも優先順位の高い書き方「インラインスタイルシート形式と!important」について説明します。
<h1 style="color:red">のようにインラインスタイルシート形式で書くと、要素セレクタ,CLASSセレクタ,IDセレクタで設定した内容よりも優先されます。
さらに優先順位の高い書き方があり、h1{color:red!important;}のようにCSSの値に「!important」をつけるとここで設定した値がもっとも優先されます。
いくつか例をあげてみます。
インラインスタイルシート(tyle="")とidセレクタを比較
インラインスタイルシート形式でタグに直接「style=""」で書き込んでいる形式と、先ほどのidセレクタで指定している形式の優先順位の比較です。
■style="color:aqua"でインラインスタイルシート形式で水色を指定、idセレクタでは赤色を指定している例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS詳細度の確認</title> <style media="screen"> #test{ color:red; } </style> </head> <body> <h1 id="test" style="color:aqua">何色が適用されるか</h1> </body> </html> |
インラインスタイルシート(style="color:aqua")で設定した水色か、idセレクタ(#test)で設定した赤色かどちらが優先されているでしょうか？
■表示結果
結果です。idセレクタ(#test)で設定した赤色よりも、インラインスタイルシート(style="color:aqua")で設定した水色が優先されて水色になりました。
インラインスタイルシートと!importantを比較した場合
さらに、インラインスタイルシート形式と最も優先順位の高い!importantでみてみます。
インラインスタイルシート(style="color:aqua")で設定した水色とidセレクタ(#test)に!importantを付け加えた赤色で比較してみます。
■設定例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS詳細度の確認</title> <style media="screen"> #test{ color:red!important; } </style> </head> <body> <h1 id="test" style="color:aqua">何色が適用されるか</h1> </body> </html> |
■比較結果
結果は、もっとも優先される!importantが適用されて赤色になりました。
なお、!importantをつけたセレクタ同士が競合する場合は、!importantをつけているセレクタの中同士でどちらがより詳細な記述かでまた優先順位が決まります。
たとえば、style="color:red!important"のようなインライン＋!importantのような記述をするとほかの箇所で書いたいかなる設定よりも強くなります(保守性の面で推奨されない書き方です)。
スタイルの継承
つづいて、スタイルの継承について紹介します。
ある要素に適用したスタイルは、その要素の中の要素（子要素）に自動的に引き継がれるという特徴があります。
たとえば、body{color:red;}と指定すると、body要素内のh1やpなどの子要素もスタイルを継承して赤色になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのHTML</title> <style media="screen"> body{color:red;} </style> </head> <body> <h1>body要素の中のh1要素</h1> <p>body要素の中のp要素</p> </body> </html> |
ただし、すべての値が継承されるわけではないことに注意してください。
たとえばフォント系（color,font-family,font-size）などは継承されますが、枠線(border)、外部余白(margin)、内部余白(padding)などは自動的には引き継がれません。
また、引き継がれたスタイルの優先順位はとても低く、さきほどの詳細度の計算と混同しないように注意して下さい。
たとえば、body{color:red!important;}とh1{color:blue;}がある場合何色になるでしょうか？
!importantがあるから最優先で赤色になると思うかもしれませんが!importanをつけているのはbody要素であって、p要素には優先度の低い継承された赤色設定がされているだけで、h1要素に直接青色指定した方がより明示的なので青色になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのHTML</title> <style media="screen"> body{ color:red!important; } h1{color:blue;} </style> </head> <body> <h1>body要素の中のp要素</h1> </body> </html> |
■表示結果
Chromeの検証機能でスタイルの優先順位を確認する
さいごに、Chromeの検証機能によるスタイルの優先度の確認方法について紹介します。
実際にウェブページを作成すると、たくさんのスタイルが競合しあって、どれが優先されているのかわかりづらいときがあります。
そういう場合は、Chromeの検証機能（Chromeで指定のウェブページを開いて右クリック＞検証）を利用すると、自分の確認したい要素にどのようなスタイルが適用されているか確認することができます。
上記例では、#testが優先されて緑色になっていることがわかります。
【HTML・CSSを個別指導】
Webスクール<「WEBST8」
まとめ
まとめです。
CSSの優先順位・詳細度をまとめると下記のようになります。
- !important
- インラインスタイルシート(style="")
- IDセレクタ
- クラスセレクタ、属性セレクタ
- 要素セレクタ
- ユニバーサルセレクタ(*)
また、継承という特性と、Chromeの検証機能を紹介しました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室
今回は以上になります。最後までご覧いただきありがとうございました。
