CSS Cascade Rule とは

Cascade Rule とは。


Cascade Rule とは何か？




簡単に言うと、
CSSの優先順位のメカニズムです。
CSSで最も基本的なコンセプトです。




スタイルのコードでは、
これを理解するのが非常に大切です。




ミニ、いいですか？




わかりました。博士。
コーヒーを少しこぼしました。




気にしなくても、
大丈夫です。




場所は博士の研究室、
ミ二は女子学生風AI、
博士は大学教授風AIです。

Cascade Rule とは。


Cascade Rule とは何か？




Cascade Ruleには、
specificity、
source order、
Inheritance、




それに、
important、
inline styles、
があります。

specificityとは。


specificityの、
日本語訳は特異性です。
セレクタの優先順位の意味です。




セレクタには、
idセレクタ、クラスセレクタ、要素セレクタがあります。




この中で優先順位は、
idセレクタが一番先です。
次はクラスセレクタです。
要素セレクタは3番目になります。




idセレクタは、
複数の要素に同じid名は指定できないので、
class属性値より高いスコアになります。




クラスセレクタは、
特定のclass属性値を持つ、
要素を選択するため、
より高いスコアになります。




要素セレクタは、
ページに表示される、
すべての要素を選択するため、
スコアが低くなります。

specificityの例。


下（した）のコードは、
specificityの例です。
idセレクタ、クラスセレクタ、要素セレクタがあります。




この場合、
緑色でテキスト文が表示されます。



<h2 class="special" id="unique" >What color am I?</h2>

#unique {
  color:green ; 
 }
.special {
  color: red ;
}
h2 {
  color: orange ;
}

source orderの例。


source orderは、
コードの記述順序です。




例えば同じ、
h2セレクターに、
2つのルールを定義していた場合、




スタイルシートのあとに、
宣言が記述されている方が、
テキスト文の表示に、
使用されます。




下（した）のコードでは、
テキスト文は青色になります。



h2 {
  color: orange ;
}

h2 {
  color: blue;
}

Inheritanceの例。


Inheritanceは、
継承です。




親要素に設定されたCSSは、
子要素に継承しないようにできます。




例えば、
h2要素に設定する色を青色にし、
span要素のセレクタを、
黒色を指定した場合を考えて見ます。




下（した）のコードでは、
span要素は
黒色に変わります。



<h2 >What color <span>am I</span>?</h2>

h2 {
  color: blue;
}

span {
  color: black;
}

inline stylesの例。


inline stylesは、
タグ内に、
スタイルを設定します。




この時、
優先度はidセレクタよりも高くなります。
下（した）の例では、テキスト文は紫色です。



<h2 class="special" id="unique" style="color:blueviolet">What color am I?</h2>

importantの例。


importantは、
最優先ワードです。
inline stylesより、
優先度は高くなります。




上記コードと、
下（した）のスタイルコードの場合、
緑色でテキスト文が表示されます。



#unique {
  color:green !important ; 
 }

画像とコード。


ミニ、いいですか？




わかりました。博士。




大事な箇所です。ミニ。
下（した）の画像とコードは、
importantがないときです。





<body> 
  <h1>CSS Example</h1>
  <h2 class="special" id="unique" style="color:blueviolet">What color am I?</h2>
  <h2 class="special" id="unique" >What color am I?</h2>
  <h2 >What color <span>am I</span>?</h2>
</body>


#unique {
  color:green; 
 }
.special {
  color: red ;
}
h2 {
  color: orange ;
}
h2 {
  color: blue;
}
span {
  color: black;
}




下（した）の画像とコードは、
importantを使ったときです。





HTMLは同じです。


#unique {
  color:green !important ; 
 }
.special {
  color: red ;
}
h2 {
  color: orange ;
}
h2 {
  color: blue;
}
span {
  color: black;
}