CSSのスタイルの優先順位

css

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

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

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

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

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

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

これは制作側は干渉できない部分ですが、ユーザ設定やブラウザによってはサイトで設定したスタイルが塗り替えられうることは覚えてきましょう。

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

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

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

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

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

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

\share/

よく読まれている記事