♡YUNI'S♡

"UPDATED DAILY"

No.16

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

f:id:marshmallow-prince-yuni:20170201220446j:plain

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


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

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