CSS

CSSの継承とスタイルの優先順位を理解する【図解付き】

どうも、つよぽんです!

今回はCSSの継承優先順位について解説していきます。

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSの継承って何?
  • CSSの優先順位って何?

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSの継承と優先度を理解するCSSのスタイル定義では「継承」「優先度」「詳細度」という概念があります。特定の要素が複数のスタイル定義に一致する場合に、どのスタイルが反映されるかは、この継承・優先度・詳細度によって変わります。...

CSSの継承と優先順位を理解すると次のようなメリットがあります。

  • 継承 : 親要素1箇所に子要素で共通で使うスタイルを定義することでCSSの記述量を減らせる
  • 優先順位 : 同じ要素(セレクター)に該当するスタイル定義が複数あっても、意図しているスタイルを反映させることができる

それでは、今回話していく内容は次の順番で進めていきます。

今回の内容
  1. CSSの継承
  2. CSSの優先順位

 

CSSの継承

CSSの継承とは、「親要素で定義されているスタイル子要素も受け継ぐ」というものです。

厳密に言うと、親要素に含まれている全ての要素がスタイルを受け継ぐため、孫要素(子要素の子要素)、そしてそれ以下の要素も一番上の要素(先祖要素)のスタイルの影響を受けます。

実際に、次の画像を使ってスタイルの継承がどのように行われているか確認してみましょう。

スタイルの継承のサンプルスタイルの継承のサンプル

上の画像で使っているコードは以下のリンクから直接確認することも出来ます。

codepen : CSSの継承サンプル

上の画像のHTML(右上)のコードを確認すると、div要素(親要素)子要素として「h2」「p」の2つの要素がセットされています。

そして、画像右下の赤枠内CSSの定義が書かれていて、「div」「h2」要素のスタイル定義はされていますが、「p」要素のスタイル定義は書かれていません。

div」「h2」要素はスタイル定義に応じてスタイルが反映されていますが、「p」要素はスタイル定義をしていないのにもかかわらず、「灰色背景」「白文字」のスタイルが反映されています。

この「灰色背景」「白文字」のスタイルはどのようにして反映されているのでしょうか?

答えは、親要素であるdiv要素のスタイル定義が子要素であるp要素にも反映されたからです。

h2要素p要素と同じdiv要素を親に持ちます。しかし「灰色背景」ではなく、緑背景がセットされています。

緑背景がセットされている理由は、CSSの定義でh2セレクターを使って背景色の色を「green」とセットしているため。

h2セレクターを使って背景色のセットはしていますが、文字色のスタイルを定義していないため、文字色に関しては親要素であるdivで定義されている「白(#000000)」が使われています。

このように、親要素で定義したスタイルは子要素にも継承されます。そして、h2要素の背景を緑色にしたように、子要素で上書きして値を書き換えることも可能になります。

CSSの優先順位

CSSには優先順位という考え方があります。

CSSの優先順位は、同じ要素に対して複数のスタイル定義がされているときにセレクターの種類に応じて反映するスタイルが決まることです。

また、セレクターの種類だけでなく、セレクターをどれだけ詳細に記述しているかによっても優先順位は変わってきます。

この章では、優先順位に影響を与える次の2つについて解説していきます。

  1. CSSの優先順位に影響を与えるセレクターの種類
  2. CSSの優先順位に影響を与えるセレクターの詳細度

厳密にはCSSの優先順位を決める際にはポイント制という考え方を使って、ポイントが高い方のスタイルが反映されるというものになります。

CSSのポイントの決め方について詳しく知りたい方は以下の記事を参考にすると良いでしょう。

CSSの優先順位に影響を与えるセレクターの種類

CSSの3つの基本セレクターを覚えていますでしょうか?

  1. 要素セレクター
  2. クラスセレクター
  3. IDセレクター

忘れてしまっている方は、以下の記事でCSSセレクターの3つの基本形を解説しているのでそちらを参考にしていただけたらと思います。

あわせて読みたい
CSSセレクターの書き方【まずは覚えたい3つの基本形】CSSでスタイルを定義するときに使うセレクターについて解説します。セレクターの書き方はたくさんあります。まずは基本となる「要素型セレクター」「クラスセレクター」「IDセレクター」の3つを覚えましょう。...

要素セレクター」「クラスセレクター」「IDセレクター」の優先順位は、下の画像にも書いてあるように、1番優先順位が高いのは「IDセレクター」、2番目が「クラスセレクター」、そして3番目が「要素セレクター」になります。

優先度別セレクターの種類優先度別セレクターの種類

実際に「要素セレクター」「クラスセレクター」「IDセレクター」の3つを使ってセレクターの優先順位によってスタイルが切り替わっているサンプルを次の画像で確認してみましょう。

セレクターによるスタイルの優先順位の確認サンプルセレクターによるスタイルの優先順位の確認サンプル

上の画像で使っているコードは以下のリンクから直接確認することも出来ます。

codepen : CSSの優先度サンプルその1

上の画像では3つの「h2」要素を使っており、3つの違いは次のとおりです。

  1. 1番上のh2要素はclass属性もid属性も無い
  2. 上から2番目のh2要素class属性を持ち、class属性値に「red」がセットされている
  3. 1番下のh2要素はclass属性を持ち、class属性値に「red」がセットされている。また、id属性値も持ち、id属性値に「blue」がセットされている。

そして、CSSには「h2」の要素セレクター(緑枠内)、「.red」のクラスセレクター(赤枠内)、「#blue」のIDセレクター(青枠内)が定義されています。

3つのh2要素の出力結果を見ると(画像左側)、のclass属性もid属性も持たないh2要素は、要素セレクターのスタイル定義にしたがって文字色に緑色がセットされています。

のclass属性を持つh2要素は、クラスセレクターの定義にしたがって文字色に赤色がセットされています。(要素セレクターのスタイル定義は無視される。)

そして、のclass属性とID属性の両方を持つh2要素は、IDセレクターの定義にしたがって文字色に青色がセットされています。(要素セレクターとクラスセレクターのスタイル定義は無視される。)

CSSの優先順位に影響を与えるセレクターの詳細度

CSSのセレクターの詳細度とは、「セレクターを複数組み合わせたスタイル定義の方が詳細度が高いよね」という考えたかになります。

セレクターを複数組み合わせたものとは、以下の記事で紹介している「子孫結合子」や「隣接兄弟結合子」などがそれにあたります。

あわせて読みたい
CSSセレクターの書き方【3つの基本形の次に覚えたい4つの型】前回CSSセレクターの書き方の3つの基本形の解説をしました。今回はその続きの記事で、3つの基本形以外でよく見かけるCSSセレクターの書き方4つの型を解説します。この4つの型を覚えることでCSSのスタイル定義の幅が広がります。...

次の画像は左に行くほど詳細度が高く右に行くほど詳細度が低いことをを表したものになります。

セレクターの詳細度のサンプルセレクターの詳細度のサンプル

一番左の「div div p」は「div要素の中のdiv要素の中のp要素」を表しており、具体的にどのp要素のことを指しているのか指定しています。

それに対して一番右の「p」は「p要素」だけを表しており、どこのp要素と具体的に指示しておらず、「全てのp要素」を指しています。

この2つを見比べたときに、どちらのほうが具体的(詳細)にセレクターが定義されているかというと、1つ目に説明して「div div p」の方が具体的(詳細)であることがわかります。

実際に詳細度を使ってCSSのスタイルを切り替えているサンプルを次の画像を使って確認していきましょう。

詳細度によるスタイルの優先順位の確認サンプル詳細度によるスタイルの優先順位の確認サンプル

上の画像で使っているコードは以下のリンクから直接確認することも出来ます。

codepen : CSSの優先度サンプルその2

上の画像で、HTML内ではp要素の中にテキストを記述しており、セレクターの詳細度に応じて文字色を切り替えています。

CSS定義の緑枠内を見ると、全てのp要素の文字色は緑色にセットする定義をしています。

しかし、赤枠内青枠内のCSS定義を見ると、より詳細にどのp要素に対して文字色を「赤色」「青色」にするという定義が書かれています。

そのため、詳細度の高い記述をしたCSS定義に当てはまるHTML要素があれば、詳細度が高い方のスタイルが反映されるようになります。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • CSSの継承
    • CSSのスタイル定義は、そのスタイルを定義した要素(親要素)の子要素にも受け継がれる
    • 受け継いだスタイルを上書きすることもできる
  • CSSの優先順位
    • ①IDセレクター、②クラスセレクター、③要素セレクターの順に優先度が高い
    • セレクターを詳細に記述すればするほど優先度が高くなる

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSの継承と優先度を理解するCSSのスタイル定義では「継承」「優先度」「詳細度」という概念があります。特定の要素が複数のスタイル定義に一致する場合に、どのスタイルが反映されるかは、この継承・優先度・詳細度によって変わります。...

さきほども書きましたが、厳密にはCSSの優先順位を決める際にはポイント制という考え方を使って、ポイントが高い方のスタイルが反映されるというものになります。

今回「IDセレクター」「クラスセレクター」「要素セレクター」によるCSSの優先順位と、セレクター詳細度による優先順位の2種類を解説しました。

そこで問題です。

極端な例ですが、「要素セレクターを1億個組み合わせた詳細度がかなり高いスタイル定義」と「IDセレクター1つだけを記述したスタイル定義」がある場合どちらのほうが優先されるでしょうか?

答えは「IDセレクター1つだけを記述したスタイル定義」の方が優先されます。理由はIDセレクターのほうがポイントが高いからです。

CSSのポイントの決め方について詳しく知りたい方は以下の記事を参考にすると良いでしょう。

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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