My Vector Space

人生は寄り道してなんぼ

【 CSSが効かない時の対処法 】 セレクタ名の書き方で「 優先順位 」が決まる

f:id:ooigawa-bitter-sweet:20181020001804j:plain

CSSが効かないという状態になった時、以下のようなミスが原因になっていることが多いと思います。

  •  タグの前後や間に全角スペースが入っている
  •  セミコロン ( ; ) の記述が抜けている
  •  閉じカッコ ( } ) の記述が抜けている
  •  編集したファイルを保存し忘れている
  •  単純にスペルミス
  •  セレクタの記述のしかたが優先順位通りになっていない
  •  class名 id名が数字で始まっている (もしくは数字のみ)
    ( ※機械は数字で始まるものに対して名前ではなく数字だと認識する )

この記事では、特に気をつけておきたい「セレクタの記述のしかたが優先順位通りになっていない」という部分についてを詳しくまとめておきます。

同じセレクタに対する指定が重複している場合は、後に書いたものが優先される

複数の箇所で同じセレクタにスタイルを指定して重複してしまう場合は、後に書いたものが優先されます。

 【 css 】
 1
 p .sample{color:green;}
 2
 p .sample{color:red;}
 3
 p .sample{color:blue;}

この場合 最後にblueを指定している為、文字は青になる。

セレクタ名の書き方で優先順位が決まる

また、前に書いていようが、後に書いていようが、どのセレクタが適用されるかは、セレクタ名の書き方で優先順位が決まる場合があります。

セレクタ名の書き方」には「優先順位のルール」があるからです。
※優先順位が決まる基準はポイント数です。

1口に「セレクタ」といっても、「タイプセレクタ(要素名)」「classセレクタ」「idセレクタなど色々な種類があり、また その組み合わせのしかたでも変わったりします。
なので、どのような書き方が優先されるのかしっかり把握しておく必要があります。

優先順位は以下のようになります。右に行くほど優先順位は高くなります。

POINT

タイプセレクタ  <  classセレクタ  <  親要素 + タイプセレクタ  <  idセレクタ

例えば以下のような指定をした場合はどうなるか。

 【 css 】
 1
 .sample{color:green;}
 2
 p .sample{color:red;}
 3
 .sample{color:blue;}

この場合の「sample」の文字の色は赤になります。

この場合 最後にblueを指定してますが、その前に「p」というタイプセレクタを指定している為、優先順位を決めるポイント数の多い ” 赤 ” が文字色になります。

関連記事

CSSで複数のセレクタ名を並べる時の記述で間違えやすいこと
CSSで複数のセレクタ名を並べる時の記述で、要素名(タイプ名)やクラス名やID名の間に「半角スペース」を入れたり、入れずに詰めたり、「 , ( カンマ ) 」を入れたりと、いくつかの記述方法があります。

プロパティの最後に「!important」を記述すると、最優先扱いにできる

ただ、上記の「優先順位のルール」には例外があって、プロパティの最後に「!important」を記述した場合です。

プロパティの最後に「!important」を記述すると、上記にある「優先順位のルール」を無視して、idセレクタよりも優先されて最優先扱いになります。

 【 css 】
 1
 .sample{color:green!important;}
 2
 p .sample{color:red;}
 3
 .sample{color:blue;}

この場合の「sample」の文字の色は緑になります。
「! important 」を指定しているからgreenが最優先で適用されます。

PICK UP
注目記事セレクション
PAGE TOP