スタイルの優先順位

css

同じ要素に複数のスタイルシートからスタイルを指定した場合、スタイルの競合が起こります。 その場合は決められた優先順位によって適用するスタイルが決まります。

スタイルの優先順位はCSSの根幹であり、正しく理解すればすっきりした記述ができます。
逆に理解が怪しいと他に優先度の高いスタイルがあるのに気付かずに「いくら修正しても反映さない!」なんてことになりかねないので気をつけましょう。

スタイルシートの種類と優先順位

スタイルシートには3種類あります。

これらが指定するスタイルが競合した場合、以下の優先順位でスタイルが適用されます。

  1. ユーザースタイルシート中で「!important」キーワードを使用したスタイル
  2. 製作者スタイルシート
  3. ユーザースタイルシート(※1を除く)
  4. デフォルトスタイルシート

ただ制作側としては干渉しようがない部分なので、豆知識程度に覚えておきましょう。

スタイルシート内に競合がある場合

同一のスタイルシート内でスタイルが競合した場合、「より小さい範囲で指定されたものが優先」されます。
具体的には以下の優先順位でスタイルが適用されます。

  1. 「!important」キーワードを使用したスタイル
  2. id
  3. class
  4. 要素
  5. *

スタイルシート内に複数の記述がある場合

同一のスタイルシート内で同じセレクタに複数指定した場合、後に書いた方が優先されます。 同じファイルであれば下に書いている方、違うファイルであれば後に読み込んだ方が勝ちます。

CSSファイルとHTMLファイルの双方に記述した場合、HTMLファイルの方が後に読み込まれるためHTMLタグに直接書いた方が優先的に適用されることは覚えておくと役に立つかもしれません。(HTMLタグに直接書くのは推奨されませんが、便利な時もあるんですよね。)

アマルウェブ HOME