CSSが効かないという状態になった時、以下のようなミスが原因になっていることが多いと思います。
- ● タグの前後や間に全角スペースが入っている
- ● セミコロン ( ; ) の記述が抜けている
- ● 閉じカッコ ( } ) の記述が抜けている
- ● 編集したファイルを保存し忘れている
- ● 単純にスペルミス
- ● セレクタの記述のしかたが優先順位通りになっていない
- ● class名 id名が数字で始まっている (もしくは数字のみ)
( ※機械は数字で始まるものに対して名前ではなく数字だと認識する )
この記事では、特に気をつけておきたい「セレクタの記述のしかたが優先順位通りになっていない」という部分についてを詳しくまとめておきます。
複数の箇所で同じセレクタにスタイルを指定して重複してしまう場合は、後に書いたものが優先されます。
この場合 最後にblueを指定している為、文字は青になる。
また、前に書いていようが、後に書いていようが、どのセレクタが適用されるかは、セレクタ名の書き方で優先順位が決まる場合があります。
「セレクタ名の書き方」には「優先順位のルール」があるからです。
※優先順位が決まる基準はポイント数です。
1口に「セレクタ」といっても、「タイプセレクタ(要素名)」「classセレクタ」「idセレクタ」など色々な種類があり、また その組み合わせのしかたでも変わったりします。
なので、どのような書き方が優先されるのかしっかり把握しておく必要があります。
優先順位は以下のようになります。右に行くほど優先順位は高くなります。
タイプセレクタ < classセレクタ < 親要素 + タイプセレクタ < idセレクタ
例えば以下のような指定をした場合はどうなるか。
この場合の「sample」の文字の色は赤になります。
この場合 最後にblueを指定してますが、その前に「p」というタイプセレクタを指定している為、優先順位を決めるポイント数の多い ” 赤 ” が文字色になります。
ただ、上記の「優先順位のルール」には例外があって、プロパティの最後に「!important」を記述した場合です。
プロパティの最後に「!important」を記述すると、上記にある「優先順位のルール」を無視して、idセレクタよりも優先されて最優先扱いになります。
この場合の「sample」の文字の色は緑になります。
「! important 」を指定しているからgreenが最優先で適用されます。
注目記事セレクション
