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

CSS

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

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

 

【HTML・CSSを個別指導】
Webスクール<「WEBST8」

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト


 

CSSセレクタとは

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

CSSセレクタ CSSの書き方
 

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

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

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

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

 
 

ユニバーサルセレクタ

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

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

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

 

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

 

■表示例
ユニバーサルセレクタ 各要素が全てピンク色になっている
 

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

要素セレクタ

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

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

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

 

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

 

■表示例
要素セレクタ 指定の要素が緑色になっている
 

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

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

classセレクタについて

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

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

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

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

 

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

 

■表示例
CLASSセレクタ 指定のクラスがある要素が青色になっている
 

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

idセレクタについて

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

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

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

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

 

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

 

■表示例
IDセレクタ 指定のIDがある要素が赤くなっている
 

なお、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の要素の背景をピンク色にする

 
 

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

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

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

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

 

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

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

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

 

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

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

優先順位の比較例

 

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

  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、要素、ユニバーサルセレクタでは、優先順位にそって、スタイルが適用されることを確認しました。
 

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

インラインスタイルシート形式、!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

  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のような記述をするとほかの箇所で書いたいかなる設定よりも強くなります(保守性の面で推奨されない書き方です)。
 
 

スタイルの継承

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

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

たとえば、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}の比較結果
 
 

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

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

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

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

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

 

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

【HTML・CSSを個別指導】
Webスクール<「WEBST8」

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト


 

まとめ

まとめです。

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

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

 

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

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8


 

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

 

おすすめ記事3選

【おすすめレンタルサーバー比較】WordPress対応サーバー5選+

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

WordPress(ワードプレス)でブログ・ホームページを始めようと思った時に、レンタルサーバー選びでどれが良いのか迷うことも多いのではないでしょうかこれからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS