こんにちは！ CSSで勉強したことをまとめています。
先日CSSでウェブサイトを作っていた時に、
指定しているはずのCSSが上手く反映されないという問題にぶちあたりました。。
色々調べていると、どうやらCSSには、
・優先順位がある
・!importantを使えば全ての優先順位を超えてくれる(日本語おかしい(_ _))
ということがわかりました。
そこで自分の勉強も含め今回は
指定したCSSが効かない_:(´ཀ`) どうしよう？？！！
という問題の対象法をまとめたいと思います！
どうやらCSSには優先順位があるらしい
CSSの指定には優先順位があるそうです。
CSS公式サイトには詳細度という書き方がされています。
何が書かれているか簡単にまとめると、
・詳細度が高い順にCSSは適用される。
・同レベルの詳細度が複数ある場合は、より後に書かれた方が優先される
とのことです。 ふむふむ。。
より細かく説明すると、詳細度は以下の順で決まります。(詳細度高い順)
・IDセレクター (id)
・クラスセレクター (class)
・要素型セレクター (h1,h2,pなど)
だそうです。
実際に試して確認してみます。
詳細度を試してみる
まず以下のHTMLファイルを作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="demo.css" /> <!-- demo.cssファイルを読み込み--> <title>Document</title> </head> <body> <h1 class="test">こんにちは</h1> </body> </html> |
h1タグのこんにちはというテキストがあるだけのシンプルなHTMLです。
次に以下のCSSファイルと作ります。
|
1 2 3 4 5 6 7 |
.test { color: blue; } h1 { color: red; } |
ここでは、“こんにちは”というテキストに、
.test(クラスセレクタ)とh1(要素セレクタ)で2回色の指定をしてますね。
どうなるかというと、
こうなります。
上で述べたように、
クラスセレクタと要素型セレクタでは、クラスセレクタが優先されます。
なので、
|
1 2 3 |
.test { color: blue; } |
testクラスの指定が優先されています。
CSSが効かない時の最終兵器 !important
シンプルなCSSファイルだと上のやり方で優先順位を確認すれば良いと思うのですが、
時間がなかったり、コードが複雑になってめんどくさい時は、
上の詳細度を無視して最優先させるものがあります。それが
!important
です。
!important超絶便利でシンプルにかけます。
上のCSSファイルを以下のように変えるだけでOKです。
|
1 2 3 4 5 6 7 |
.test { color: blue; } h1 { color: red !important; /*!importantを最後に付け加えればOK*/ } |
最優先したいところの最後に、!importantをつければOkです。
本来はCSSセレクタが優先されるので、
|
1 2 3 |
.test { color: blue; } |
これにより文字の色が青になるはずですが、
|
1 |
color: red !important; |
!importantを付け加えたことで、優先順位が変わり、文字色は赤になります！
以上です！！
終わりに
いかがでしょうか。今回はCSSの優先順位と!importantの使い方をまとめました。
本ブログでは他にもCSSの記事など書いているので参考にしてみてください〜！