CSSのスタイルの優先順位

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

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

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

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

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

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

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

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

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