スタイルの優先順位！CSSが効かない原因はこれかも【CSS】

Webサイトのデザインやレイアウトを整えるためのCSSですが、同じ要素に対してスタイルがかぶってしまい、思ったようにスタイルが効かなくて困ったことがあるという人も少なくないと思います。

それはCSSのスタイルというのは指定する方法や記述する順番、または属性がついているかどうかなどによって優先順位があるからです。

スタイルを適用させる方法による優先順位

サイトをつくるときは制作者がCSSでスタイルを指定していると思いますが、ブラウザによって既定のスタイルもありますし、ユーザーがブラウザのスタイルを設定しているという場合もあります。

基本的に後に読み込まれるスタイルの方が優先順位が高くなるので、「ブラウザ既定のスタイル＜ユーザー設定のスタイル＜制作者指定のスタイル」という風に、制作者が指定したスタイルが一番優先されます。

また、『CSSをHTML文書に適用させるいくつかの方法【CSS】』でスタイルをHTMLに適用させる方法を書いたのですが、その方法によってどのように優先順位が決まっているのか。

外部のスタイルシートを読み込む方法よりもHTML文書に直接style要素を記述する方が優先順位が高いです。

そして一番優先順位が高いのは、HTMLの各タグにstyle属性を記述するという方法。

つまり、「外部のスタイルシートを読み込む＜HTMLにstyle要素を記述する＜グローバル属性であるstyle属性を使う」という風に優先順位が決まっています。

また、スタイルを記述する順番による優先順位についてですが、

p {
　　color: black;
　　color: blue;
　　color: red;
}

<p>後に記述した方が優先</p>

同じ要素に対して複数のスタイルを指定すれば後に記述した方が上書きされるので、当然優先順位も高くなります。

スタイルの優先順位はセレクタによっても異なります。

たとえば、指定したセレクタにidとかclassといった属性がついているのか、擬似クラスや擬似要素を使っているかどうかなどによって点数方式で優先順位が変わります。

点数に関しては後で説明するとして、いくつかのパターンでセレクタを比較して優先順位を確認していきたいと思います。

pタグなどのように、タグそのもの（タイプセレクタ）を指定する場合や、仮にpタグにclass名をつけてclassセレクタとして指定する場合があると思います。

.color {
　　color: red;
}
p {
　　color: black;
}

<p class=”color”>タイプセレクタよりもclassセレクタ</p>

後に記述した方が優先されるという考えでいうとpというタイプセレクタで指定されたスタイルが優先されると思うのですが、「.color」というclassセレクタで指定されていると、タイプセレクタよりもclassセレクタの方が優先されます。

先ほどと記述する順序は同じですが、タイプセレクタに親要素のクラス名をつけてみます。

.color {
　　color: red;
}
.box p {
　　color: black;
}

<div class=”box”>
　　<p class=”color”>親要素があるとどうなるか</p>
</div>

タイプセレクタの前に親要素のclassセレクタを入れて指定する場合と、先ほどのclassセレクタを比較するとどうなるかというと、親要素が入っている方が優先されます。

よくHTMLの要素にはidやclassを設定すると思いますが、それぞれに違ったスタイルを指定した場合、idセレクタが優先されます。

.couleur {
　　color: blue;
}
.color {
　　color: red;
}

<p id=”couleur” class=”color”>classセレクタよりもidセレクタ</p>

いくつかパターンを紹介しましたが、どのように点数が計算されるかというと、下の表のようになっています。

CSSのスタイルがうまく適用されないときによく使ってしまう人も多いのが「!important宣言」です。

スタイルの区切りを表しているカンマ（;）の後ろに「!important」と記述することで、そのスタイルが最優先されるという必殺技です。

しかしあまり多用しすぎるのはよくないといわれているので、CSSの優先順位というのを理解しておき、なるべく!importantを使わずにスタイルを指定できたらいいかなと思います。