読者です 読者をやめる 読者になる 読者になる

WEBアプリ開発記

~備忘録としてね~

CSSの優先順位

CSSは、書いても思い通り適用されない、複雑になるというイメージがある。

確かに複雑なのだが、少しだけ救われるヒント。

 

・基本的には、後に書いたもの、読み込まれたものが優先される。

CSSはポイント制になっており、ポイントに従って適用される優先順位が変わる。

 

[ポイントについて]

 <div id="section-a" class="section-block">こんにちは</div>

という要素があるとして、

 

1.タグ(divなど)での指定は1ポイント

 例)

 div {

    color: #F00;

}

 

2.クラスでの指定は10ポイント

例)

.section-block {

    color: #0F0;

}

 

3.IDでの指定は100ポイント

例)

#section-a {

    color: #00F;

}

 

上記3つがすべてCSSに指定されていたら、書かれた順(読み込み順)に関係なく、文字色は最高ポイントを持ったスタイルが適用され、青くなる。

 

これらを踏まえて、、

 

div.section-block {

    color: #FF0;

}

 

 のようなセレクタ指定では、1 + 10 = 11ポイント。

 

.section-block#section-a {

    color: #0FF;

}

 

のようなセレクタ指定では、10 + 100 = 110ポイントとなる。

 

後に書かれていても、ポイントが高い方に書かれているスタイルが適用される。

また、ポイントが同じスタイルが存在した場合は、後に書かれている(読み込まれている)スタイルが適用される。

 

それでもやはりCSSは複雑なのだが、知ってると少しはマシになるだろう。