どうしてもCSSが効かないことってありませんか？ 私は何度も経験しています。そのたびに投げ出しそうになりますが、ほとんどのケースで詳細度が原因となっていました。
今回はCSSの詳細度、記述順番や記述場所について一緒に勉強していきましょう。
どのセレクタが有効になるか、きちんと確認しよう
セレクタの詳細度とは？
セレクタの指定には大きく分けて以下の３パターンがありましたね。
- タグ（ p など）に直接指定をする
- id に対して指定をする
- class に対して指定をする
See the Pen syousaido by taichi (@taichi_na) on CodePen.
上の画面のCSSをクリックして確認してみてください。それぞれに文字色の指定がされています。
文字の色は緑になっているので、実際に有効なのは #sentence すなわち id に付けたものとなっています。
どの記述を優先させるのかを詳細度と呼んでいて、その強さは「タグ< class < id」という順番になります。一つの要素に対して複数指定されている今回の例では、最も詳細度が高い#sentence の内容が反映されるわけです。
記述順序と記述場所について
今度は記述順序についてのお話です。以下の例を見てみましょう。
See the Pen zyunjo by taichi (@taichi_na) on CodePen.
同じ詳細度で書かれているものは後から書かれたものが反映されるというルールがあります。jQueryなどで新たにクラスを追加すると、それが反映され見た目が変わるのは、このルールがあるからです。
次に注目するのは、CSSの記述場所です。CSSを記述する場所は3つありましたね。
- <head>タグ内に記述する（内部参照）
- 別に作ったファイルを参照する（外部参照）
- HTMLに記述する（インラインCSS）
詳細度みたいに記述場所でもその強さがあり、このようになっています。
「外部参照<内部参照<インライン」
以下の例で確認してみてください。インラインに記述した文字色 red が有効になっていることがわかると思います。
See the Pen basyo by taichi (@taichi_na) on CodePen.
詳細度で id が最も高いというお話をしましたが、そもそもインラインに記述があった場合には負けてしまうのです。
実際にインラインにスタイルを指定するケースはまずありませんし、<head>内に記述する内部参照もあまり使われないので、場所に関してはそれほど重要ではありませんね。
反映されないよくあるパターン
先ほど少し触れましたが、jQueryなどで後からクラスを追加した場合、元の詳細度と同じであれば、ルールに従って後に書かれたものがきちんと反映されるのですが、元の詳細度が意図せずに高くなってしまっている場合があります。
以下の例のように、子孫セレクタとして指定していた場合、詳細度が高くなっているので、その後にいくら記述してもそれは反映されません。
See the Pen matigae by taichi (@taichi_na) on CodePen.
SCSSを用いたスタイルの指定でやりがちなので注意してください。
全てを無視する !important
See the Pen important by taichi (@taichi_na) on CodePen.
最後にご紹介するのは、今までの記述ルールをすべて無視する最強の方法です。!important が書かれているプロパティと値は、詳細度、記述順序、記述場所、それらの秩序を完全に無視して最強となります。
以下の例で確認してみましょう。先ほどと同じものですがインラインに書かれている red でもなく、id に書かれている green でもなく、class に書かれている blue でもない、タグをそのままセレクタにしている p{color: purple;} が有効になっていますね。
外部参照かつタグへの指定で、本来最弱なはずのものが、この !important 一つの記述で最強になってしまうのです。
どうしても効かないときについ使ってしまいたくなりますが、原因は必ずあるのでまずはそちらを探るようにクセを付けましょう。
どうしてもCSSの構造上やむを得ないときにのみ、この !important を使います。
まずは検証画面で確認をしてみましょう
検証画面（F12キー）でそれぞれの要素をクリックすると、有効なCSSを確認することが可能です。CSSを指定しているのに横線が引かれてそれが反映されていない場合、より強いほかのCSS（詳細度が高いなど）指定がされているはずです。
color: red;
こんな感じになっていたら、CSSは正しく記述されているんだけど、ほかにより強いセレクタが存在していて、この指定は打ち消されているということです。
クラスが有効になっていなければ何らかの記述ミス、クラスが有効なのにそれに横線が引かれていて反映されていないのであれば、ほかのものが優先されている、そう思うようにしましょう。
