No.16

覚えておきたいルールというものを
5つ知ったので
今日はその紹介をします。

1.後に書いたほうが優先される

以下のHTMLがある。

＜h3＞Hello＜/h3＞

このHTMLへ以下のスタイルを適用する。

h3 { color: red; }
h3 { color: blue; }

この場合優先されるのは後に書いたほうであり
h3要素は青文字になる。

HELLO

2.classよりidが優先される

以下のHTMLがある。

＜h3 class=“.warning” id=“criticalMessage"＞Hello＜/h3＞

このHTMLへ以下のスタイルを適用する。

criticalMessage { color: blue; }

.warning { color: red; }

この場合優先されるのはid指定のほうであり
h3要素は青文字になる。

HELLO

idとclassを一つのタグ内に書くときは要注意。

CSSセレクタを駆使し
そもそもidやclassに頼らないという選択肢もある。

3.詳細に指定したほうが優先される

以下のHTMLがある。
＜div＞
＜h3＞Hello＜/h3＞
＜/div＞

このHTMLへ以下のスタイルを適用する。

div > h3 { color: blue; }
h3 { color: red; }

この場合優先されるのは
セレクタを詳細に記述したほうであり
h3要素は青文字になる。

HELLO

4.HTMLタグに書くstyle属性はCSSのstyleより優先される

以下のHTMLがある。

＜h3 style=“color: blue;"＞Hello＜/h3＞

このHTMLへ以下のスタイルを適用する。

h3 { color: red; }

この場合優先されるのは
HTMLタグで指定したスタイル属性であり
h3要素は青文字になる。

HELLO

5.!import"は何よりも優先される

以下のHTMLがある。

＜h3 style=“color: blue;"＞Hello＜/h3＞

このHTMLへ以下のスタイルを適用する。

h3 { color: red !important; }

この場合優先されるのは
“!important"が指定されたスタイルであり
h3要素は赤文字になる。

HELLO

以上、５つ以外にも
授業でやっていた飽くなき挑戦(?) により
どっちが本当に強い(?)のかを
色々試せておもしろかったです。

またこういうの見つけたら
ちゃんと覚えておこうと思います。