【 CSSが効かない時の対処法 】 セレクタ名の書き方で「 優先順位 」が決まる
CSSが効かないという状態になった時、以下のようなミスが原因になっていることが多いと思います。
この記事では、特に気をつけておきたい「セレクタの記述のしかたが優先順位通りになっていない」という部分についてを詳しくまとめておきます。
複数の箇所で同じセレクタにスタイルを指定して重複してしまう場合は、後に書いたものが優先されます。
この場合 最後にblueを指定している為、文字は青になる。
また、前に書いていようが、後に書いていようが、どのセレクタが適用されるかは、セレクタ名の書き方で優先順位が決まる場合があります。
「セレクタ名の書き方」には「優先順位のルール」があるからです。
※優先順位が決まる基準はポイント数です。
1口に「セレクタ」といっても、「タイプセレクタ(要素名)」「classセレクタ」「idセレクタ」など色々な種類があり、また その組み合わせのしかたでも変わったりします。
なので、どのような書き方が優先されるのかしっかり把握しておく必要があります。
優先順位は以下のようになります。右に行くほど優先順位は高くなります。
例えば以下のような指定をした場合はどうなるか。
この場合の「sample」の文字の色は赤になります。
この場合 最後にblueを指定してますが、その前に「p」というタイプセレクタを指定している為、優先順位を決めるポイント数の多い ” 赤 ” が文字色になります。
CSSで複数のセレクタ名を並べる時の記述で間違えやすいこと
CSSで複数のセレクタ名を並べる時の記述で、要素名(タイプ名)やクラス名やID名の間に「半角スペース」を入れたり、入れずに詰めたり、「 , ( カンマ ) 」を入れたりと、いくつかの記述方法があります。
ただ、上記の「優先順位のルール」には例外があって、プロパティの最後に「!important」を記述した場合です。
プロパティの最後に「!important」を記述すると、上記にある「優先順位のルール」を無視して、idセレクタよりも優先されて最優先扱いになります。
この場合の「sample」の文字の色は緑になります。
「! important 」を指定しているからgreenが最優先で適用されます。