初級者は意外と理解してない(?)CSSの優先順位について
cssを習いたての時はよくわからなく、なんとかブラウザ上でデザイン通り表現出来たらOKってことになりがちで優先順位なんて気にもしないなんて人もいるかもしれません。
しかし、優先順位を理解すると、無駄なソースを書かずに済むことができます。
基本ではありますが、優先順位について書いていきます。
まず、一言で言ってしまうと、
より細かく、後に書かれたスタイルが適用されます。
細かいっていうのが表現として合っているかはわかりませんが・・・
要素で指定
|
1 2 | div { margin: 10px;} div { margin: 15px;} |
この場合、divのmarginは15pxになります。
優先順位
同じ書き方をした場合、後から書かれたスタイルが適用されますが、
idやclassで書かれた場合は、以下のようになります。
id > class > 通常要素[p,div,h1,li等] ( > 全体[*])
ちなみにidとclassは要素を指定した場合、指定しない場合より優先順位は高くなります。
順番的には、以下のようになります。
|
1 2 3 4 5 6 | div#test { margin: 5px;} #test { margin: 10px;} div.test { margin: 15px;} .test { margin: 20px;} div { margin: 25px;} * { margin: 30px;} |
HTMLは、
|
1 | <div id="test" class="test"> |
この場合は、もちろん、marginは5pxになります。
!importantについて
そして、最強なのが
!importantです。
|
1 2 | div#test { margin: 5px;} div { margin: 25px !important;} |
この場合、!importantが優先されるので、marginは25pxになります。
もう少し細かい例
もっと細かく例を挙げたいと思います。
先ほど指定の順番を載せましたが、
階層を書けば、書いたほうが優先されます。
|
1 2 3 4 5 6 7 8 | <div id="wrapper"> <div class="contents"> <div class="main"> <h1>タイトルタイトル</h1> <p>テキストテキストテキストテキスト</p> </div> </div> </div> |
|
1 2 3 4 5 6 | .contents .main .article p { margin: 10px; } .contents .main p { margin: 5px; } |
こちらは、Pのmarginは10pxになります。
|
1 2 3 4 5 6 | #wrapper p { margin: 15px; } .contents .main .article p { margin: 5px; } |
ちなみにこれだとmarginは15pxが適用されます。
id指定は一番強いので、
上記のようにclassで指定してもidが優先されます。
指定の仕方はもっといろいろあるので、
これは基本的な優先順位になります。
指定の仕方はまた改めて書きたいと思います。
Author Profile
スターフィールド編集部
SHARE
