WEBサイトのデザインを調整している時、
とお困りのことはありませんか？
スタイルシートが適用されない場合は、
スタイルの優先順位が低くないかを確認し、
適用される順位での記述方式に変更することでデザインが反映されるようになります。
ここでは、色々なパターンのCSS優先順位について見ていきましょう。
目次
書く場所で決まる優先順位
HTMLタグの中で直接スタイルを設定した場合の優先順位
CSSの書き方として、
- 外部スタイルシートファイルへの書き込み（例：style.cssなど）
- HTMLファイル内にCSS記述エリアを作って指定する
- HTMLタグの中で直接スタイルを指定する
という方法があります。
これらの中で、もっとも優先されるのがHTMLタグの中で直接スタイルを設定する方法となります。
具体的な例を見ていきましょう。
HTMLタグの中で直接スタイルを設定するサンプル
style.cssの中身
この場合、優先順位は高いものから順に
「③HTMLタグの中で直接スタイルを設定」
→「②CSS記述エリアへの記述」
→「①スタイルシートのデザイン」
となります。
よって、適用されるのはフォントサイズ18pxとなります。
同一ファイル上での優先順位
CSSの記述ルールでは、原則として後に書かれた内容が適用されます。
例えば、「style.css」というスタイルシート上で、以下のような記述があったとします。
「style.css」というファイル内に複数のpタグが存在している記述
この場合、一番後ろに書かれた記述が適用されるため、フォントサイズは18pxで表示されます。
スタイルシートは上から順に読み込まれていくのですが、同じ項目があった場合、読み込みが起きる毎に内容が書き換えられてしまうため、一番最後に読み込まれた内容が最終的に残るのです。
スタイルシートファイルの読み込み順で決まるスタイルの優先順位
上で紹介した通り、CSSは後に書かれたものほど優先されるというルールがあります。
そして、これは同一ファイル上に限ったことではありません。
例えば、以下のようぶ「style.css」「mystyle.css」というスタイルシートがあり、サイト上で両方のファイルを読み込んでいるとします。
スタイルシートの読み込み部分の記述
style.css
mystyle.css
この場合、最初に「style.css」のpタグが設定された後に、新しく「mystyle.css」に記述されたpタグが読み込まれるため、内容が書き換えられてしまいます。よって、表示は「mystyle.css」側の内容であるフォントサイズ18pxが適用されます。
セレクタで決まる優先順位
「divタグ」「pタグ」「aタグ」といったHTMLとしてもともとあるタグのことをタイプセレクタと呼びます。
一方で、自分でclass名を指定したタグのことをclassセレクタ、自分でid名を指定したタグのことをidセレクタと呼びます。
セレクタのサンプル
各セレクタの優先順位は、「idセレクタ」が最優先され、次に「classセレクタ」、その次に「タイプセレクタ」が適用されます。
この例の場合、idセレクタであるフォントサイズ18pxが適用されます。
要素の設定詳細度で決まる優先順位
CSSでは、より詳細な設定をすればするほど優先順位が上がります。
タイプセレクタと組み合わせることで優先順位が上がる
classセレクタやidセレクタは、タイプセレクタと組み合わせることで優先順位が上がります。
具体的な例を見て見ましょう。
タイプセレクタと組み合わせたclassセレクタのサンプル
上の例の場合、優先順位は高いものから順に、
「タイプセレクタと組み合わせたclassセレクタ」
→「通常のclassセレクタ」
→「通常のタイプセレクタ」
となります。
つまり、この場合に適用されるのはフォントサイズ18pxとなります。
この関係性は、idセレクタの時も同様な順位がつくため、
「タイプセレクタと組み合わせたidセレクタ」
→「通常のidセレクタ」
→「通常のタイプセレクタ」
の順に優先されます。
複数のclassセレクタを指定することで優先順位が上がる
idは要素につき１つだけの指定ですが、classは要素につき複数の指定を行うことができます。
そして、複数のclassが付与されている場合、CSS指定時に複数のclassセレクタを指定して記述することによって優先順位が上がります。
複数のclassセレクタを指定する時は、スペースは入れずにつなげてclassセレクタを記述します。
具体的な例を見ていきましょう。
複数のclassセレクタ指定のサンプル
この場合、優先順位が高いものから順に
「複数（３つ）classセレクタ」
→「複数（２つ）classセレクタ」
→「単一classセレクタ」
となります。
そのため、フォントサイズは18pxが適用されます。
親ブロックのセレクタと一緒に指定することで優先順位が上がる
タイプセレクタとの組み合わせよりも優先される内容として、親ブロックのセレクタと一緒に指定する、というものがあります。
親要素セレクタとの組み合わせ時には、要素の間にスペースを入れて指定します。
具体的な例を見ていきましょう。
親要素のセレクタと組み合わせたclassセレクタのサンプル
この場合、タイプセレクタとの組み合わせよりも親要素との組み合わせが優先されるため、フォントサイズは16pxで表示されます。
もっと細かい順位を見ていくと、以下のような順位で優先されます。
最優先タグ「!important」
今までに紹介した書く場所やセレクタに関係なく、語尾に「!important」をつけることで、全てのスタイルの中から最優先で内容が反映されるようになります。
ただし、「!important」を乱発していると、「!important」同士でタグの競合が起きたり、表現できるデザインの幅が狭まったりという問題が発生しますので、できる限りは優先順位に基づいた調整を行うようにしましょう。
「!important」はあくまで最終手段です。
!importantの使用サンプル
この場合、「!important」が最優先となりフォントサイズは16pxで表示されます。
まとめ
基本的な考え方として、以下のような関係性であると覚えておきましょう。
- !importantで指定されたタグ
- 親ブロックと合わせて指定されたidセレクタ
- タイプセレクタと合わせて指定されたidセレクタ
- idセレクタ
- 親ブロックと合わせて指定された複数のclassセレクタ
- 親ブロックと合わせて指定されたclassセレクタ
- タイプセレクタと合わせて指定された複数のclassセレクタ
- タイプセレクタと合わせて指定されたclassセレクタ
- 複数のclassセレクタ
- classセレクタ
- 親ブロックと合わせて指定されたタイプセレクタ
- タイプセレクタ
また、全く同じタグが複数存在した場合は、「後に書かれたものが優先される[/markaer]」というポイントを合わせて押さえてきましょう。
