CSSスタイルの優先順位まとめ

CSSをたくさん記述していくと、うっかり同じセレクタやプロパティに違うスタイルが指定されている、なんてことが起きてくるかもしれません。

こういった場合、どの記述が実際に適用されているのか知っていますか？　実は、記述が読み込まれて表示されるのには優先順位があります。

スタイルの優先順位

スタイルの優先順位ですが、同じ要素の同じプロパティに、違う値を指定してあったとします。

実際の記述で見てみると、上記の様な場合です。この場合、pの文字色は何色になるでしょうか？

正解は、３段目の青です。なぜかというと、すべて読み込んだものが結果として表示される訳ですが、後に読み込んだものは先に読み込んであったものに、上書きされていきます。ですから、最後は青になります。

最後に読み込まれたものが、表示には適用される。と、覚えておきましょう。

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

また、定義されるスタイルシートは３種類あります。Webサイトの制作者が定義したスタイルシート、Webサイトを閲覧するユーザーが定義したスタイルシート、ブラウザが定義したスタイルシートの３つです。

ブラウザのスタイルシート

まず、ブラウザのスタイルシートとはどのようなものかということですが、一般的なブラウザには、デフォルトのスタイルシートがあります。

<h1>などのタグは、スタイルシートの記述がなくてもサイズが大きく太字の強調したスタイルで表示されていませんか？　それは、ブラウザにはデフォルトのスタイルシートがあるからなのです。

ユーザーが定義できるスタイルシート

次にユーザーが定義できるスタイルシートについてです。ユーザーは、ブラウザの機能を利用することで、ウェブページの表示スタイルに、自分の定義したスタイルシートを適用して閲覧することができます。

３つのスタイルの優先順位

ではこの２つと、制作者が定義したスタイルシートが競合した場合どのスタイルが優先されてるのでしょうか？

その場合は制作者の定義したスタイルシートが最も優先されます。次に、ユーザーが定義したスタイルシート。最後にブラウザのスタイルシートの優先順位になります。

競合した場合、制作者の定義したスタイルシートが優先されるのであれば、何種類スタイルシートがあっても表示は安心できますね。