CSSセレクタのスタイルが適用される優先順位について

セレクタには優先順位が定義されている

CSSのセレクタには次のように優先順位が決まっています。

上に行くほどポイントが高く優先されるセレクタになり、下に行くほどポイントが低いセレクタです。

適用範囲の広いセレクタほどポイントは低く、適用する要素を限定するほどポイントは高くなります。
また、HTML要素にstyle属性を使ってスタイルを記述した場合は、強制的に優先度が高くなります。

コード例を使いながら、もう少し詳しく解説していきます。

階層を使ってセレクタの優先度を調整する

要素を限定するほどポイントが高くなるというルールがあるため、セレクタは階層状態にするとポイントも加算されるようになっています。

階層による優先度を示すコード例

p {
  color: #333;
  line-height: 1.6em;
}

/*
階層状態になっているタイプセレクタ。
こちらのスタイルが優先的に適用される
*/
section p {
  color: #c00;
}

HTML コード例

<section>
  <p>サンプルテキストです。</p>
</section>

上記のCSSの場合、「section p」に記載したCSSの方が要素を限定しているため優先されます。

続いて、クラス名を使ったコード例です。

クラスセレクタによる優先度を示すコード例

/* この中では、このCSSが最も優先される */
.text {
  color: blue;
}

p {
  color: #333;
  line-height: 1.6em;
}

section article p {
  color: #c00;
}

HTML コード例

<section>
  <article>
    <p class="text">サンプルテキストです。</p>
  </article>
</section>

3階層にもなるタイプセレクタ「section article p」がありますが、上記のコードではクラスセレクタが最もポイントが高いため、優先して適用されます。

次のように優先順位が同じ場合は、下に記述されたコードを優先して適用します。
これは、適用される順番が最も遅いものが最終的に上書きして適用されるためです。

同じポイントのセレクタによる優先度を示すコード例

/*
下記の「.text2」とポイントは同じだが、先に記述されているため適用が上書きされる
*/
.text {
  color: blue;
}

.text2 {
  color: #446f00;
}

p {
  color: #333;
  line-height: 1.6em;
}

section article p {
  color: #c00;
}

HTML コード例

<section>
  <article>
    <p class="text text2">サンプルテキストです。</p>
  </article>
</section>

次はIDセレクタが記述されている場合のコードです。
記述されたセレクタの中ではIDセレクタが最もポイントが高いため、優先して適用されます。

IDセレクタによる優先度を示すコード例

/*
IDセレクタはポイントが高く優先されやすい
*/
#text1 {
  color: #ff2458;
}

.text {
  color: blue;
}

p {
  color: #333;
  line-height: 1.6em;
}

section article p {
  color: #c00;
}

HTML コード例

<section>
  <article>
    <p id="text1" class="text">サンプルテキストです。</p>
  </article>
</section>

「!important」を使って優先順位に割り込む

CSSプロパティの後ろに「!important」をつけると、セレクタのポイントとは関係なく優先して適用されます。

!importantの優先度を示すコード例

#text1 {
  color: #ff2458;
}

.text {
  color: blue;
}

p {
  color: #333 !important;
  line-height: 1.6em;
}
</style>
<section>
  <p id="text1" class="text">サンプルテキストです。</p>
</section>

IDセレクタ、クラスセレクタの指定を無視して、通常のタイプセレクタに記載されたスタイル（color: #333;）が適用されていることが分かります。

「!important」が付いているプロパティは、style属性に書かれたスタイルよりも優先されます。

!importantの優先度を示すコード例

<style>
#text1 {
  color: #ff2458;
}

.text {
  color: blue;
}

p {
  /* style属性よりも優先して適用される */
  color: #333 !important;
  line-height: 1.6em;
}

HTML コード例

<section>
  <p id="text1" class="text" style="color: orange;">サンプルテキストです。</p>
</section>

p要素のstyle属性に書かれたcolorプロパティは無視され、タイプセレクタの「color: #333;」が適用されます。

「!important」の指定は優先度を高くできるため便利ですが、メンテナンス性は下がってしまうため極力使用しない方が無難です。