【CSS】カスケーディングとは何か?インラインスタイル、!importantの優先順位やセレクタでタグ名とクラス名を指定した場合にどちらのスタイルが適用されるか?

css3-prograshi(プロぐらし)-kv CSS・SCSS
記事内に広告が含まれていることがあります。

CSSにはカスケーディングという考え方があります。

CSSのカスケーディングを考えないと、スタイルを適用したはずなのに狙ったスタイルが適用されないということが頻発します。

ここでは、CSSのカスケーディングとは何かについて解説しています。


カスケーディングとは何か?

CSSにおけるカスケーディングとは、ある要素に対して、複数のスタイル処理を指定した場合に、どの処理を優先して適用するかの順序です。

英語ではCascadingと書き、Cascade(カスケード)の進行形になっています。

Cascade(カスケード)とは滝が幾段にも重なった状態を表しています。

CSSでは、滝のように段々とスタイルを適用させていくイメージになぞらえています。

point

カスケーディングとはスタイルを適用する優先順位のこと。


スタイル適用の優先順位

CSSのカスケーディング、すなわちスタイル適用の優先順位は大きく次の2つに分類することができます。

スタイル適用の優先順位
  1. ファイルの中のスタイル適用の優先順位。
  2. セレクタの種類によるスタイル適用の優先順位。


ファイルの中のスタイル適用の優先順位

CSSファイルの中では、下側に記述されている処理ほど、スタイル適用の優先順位が上がります

このため、SASSの@import機能で他のCSSファイルを読み込むときに、上側で読み込んだファイルで指定しているプロパティと、後から読み込んだファイルで指定しているプロパティに同じ記述があった場合、後から読み込んでいるスタイルが優先されます


実例:CSSファイル内の場合

例えば、以下のようにクラス名「red-color」と「blue-color」がついたdivタグがあるとします。

<p class="red-color blue-color">ダミーテキスト</p>

これに対して、それぞれのクラスを指定してCSSを記述したとします。

.red-color{
  color: red;
  background-color: yellow;  
}

.blue-color{
  color: blue;
}

ブラウザの表示は以下のようになります。

指定したpタグに適用されるのは、下側に記述した「blue-color」の処理が優先的になり、上側の「red-color」のプロパティの値は上書きされます。

なお、「background-color」のように、他に処理が出てこない場合は上書きは発生しません。


実例:他のファイルを読み込む場合

例えば、@importを使って、以下のように「fundation/_base.scss」と「layout/_footer.scss」ファイルの2つを「app.scss」というファイルの中で読み込んだとします。

@import "foundation/_base";
@import "layout/_footer";

すると、app.scssの中にはファイルを読み込んだ順番に、そのファイルの内容が入ります。

このため、後から読み込んでいる「layout/_footer.scss」の中に、「fundation/_base.scss」と重複する指定があると、後から読み込んだファイルの内容で上書きが発生してしまいます。

point

ファイルを読み込む順番が大切。スタイル適用の優先度が低いファイルから読み込んでいく。


セレクタの種類によるスタイル適用の優先順位

CSSではスタイル適用の処理を各順番以外にも、どのセレクタや書き方を使うかで適用の優先順位が変わります。

例えば、aタグに直接スタイルを指定したものよりも、a:linkのように疑似クラスを使った処理の方が優先されます。

このため、a:linkの中に重複するプロパティがあれば、その値で処理を上書きします。

さらに、タグの種類よりも、クラスで指定したり、id名で指定する方が優先度は強くなります。

セレクタとは異なりますが、更に上の優先度になるのが、HTML上に直接スタイルを記述するインラインスタイルです。

そして最強なのがプロパティの後ろに「!important」を宣言する書き方です。

このため、CSS/SASSファイルの読み込み順序や書き方がカオスになっていると、スタイルの強制適用を表す「!important」の記述が乱用されることになります。(非常にメンテ性が低い状態です)

なお、FLOCSSではLayoutレイヤーのみid名を使ったidセレクタ(#セレクタ名)の使用が許可されています。その他のレイヤーではクラス名を使ったクラスセレクタを使用します。

各セレクタや記述の優先度をまとめると以下のようになります。

適用の優先度セレクタや適用の種類処理の例
6!important宣言color: red !important;
5インライン(style属性)style=”color: red;”
4IDセレクタ#hoge
3クラスセレクタ.hoge
3属性セレクタa[href=”https://example.org”]{color: red;}
3擬似クラスbutton:hover {color: red;}
2疑似要素p::first-line {color: red;}
2要素セレクタp {color: red;}
1ユニバーサルセレクタ* {color: red;}
  • 優先度は最弱を1として+1ずつで表示しています。
  • !importantはセレクタではありませんが、すべてのルールを無視して適用されるため最上位の優先度として記載しています。

>(参考)htmq.com セレクタの種類一覧


合わせて読みたい

「:」や「::」がついた疑似要素や疑似クラスの詳細については下記をご参考ください。

【CSS】疑似要素と疑似クラスとは何か?セレクタのコロン2つ::と1つ:の違いを実例で解説


タイトルとURLをコピーしました