CSSを上書きする際の注意点とルールを初心者にもわかりやすく解説

既にCSSが指定されている要素に、別のCSSを指定する。

これをCSSの上書きといいます。

共通のCSSを解除し、部分的に別のCSSを指定するときなど、使う機会は頻繁にあります。

本記事では、CSSの上書きのルールと注意点についてまとめたので、ぜひ参考にしてください。

上書きのルールと注意点を把握して、綺麗なコーディングができるようになりましょう。

CSSを下に記述して上書きする

まず、基本の仕様です。

同じセレクタにCSSが指定されていた場合、下にある記述が優先されます。

例えば以下のような場合です。

CSS
p {
font-size:10px;
}
p{
font-size:16px;
}

pタグにfont-sizeが別々に指定されています。

優先されるのは下の記述なので、font-sizeは16pxとなります。

CSS
p {
font-size:10px;
font-size:16px;
}

上記のように同時に指定されていたとしても、下の記述が優先されます。

また、以下のHTMLのように複数のCSSを読み込んでいた場合、下に書かれている「style2.css」の記述が優先されます。

HTML
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">

最初に全ページ共通のCSSを読み込ませて、その下にページごとの固有のCSSを読み込ませるという記述法がよく使われています。

classセレクタを使ってCSSを上書きする

classが指定されているセレクタは、通常のセレクタより優先度が高くなります。

CSS
p.sample {
font-size:10px;
}
p{
font-size:16px;
}

下にある記述が優先されるのが基本ですが、classが指定されているセレクタは、上に記述されていたとしても何も指定されていないセレクタより優先度が高くなります。

この場合の、font-sizeは10pxです。

IDセレクタを使ってCSSを上書きする

IDが指定されたセレクタも、classが指定されたセレクタと同様、何も指定されていないセレクタより優先度が高くなります。

IDはclassよりも強力です。

CSS
p#sampleid {
font-size:10px;
}
p.sample{
font-size:16px;
}

IDとclassがバッティングした場合は、記述位置を問わずIDが優先されます。この場合、font-sizeは10pxです。

要素を特定するclassやIDは、要素まで記述されている方が優先度が高くなります。

CSS
p.sample {
font-size:10px;
}
.sample{
font-size:16px;
}

要素が指定されていない「sample」よりも、pタグの「sample」の方が強いということです。

入れ子にしてCSSを上書きする

セレクタの中のセレクタと詳細に指定すると、優先度が高くなります。

CSS
div p {
font-size:10px;
}
p{
font-size:16px;
}

この場合、通常のpタグより、divタグの中にあるpタグという記述が優先されます。

ただし、IDやclassが記述されたセレクタがある場合は、入れ子は関係なくそちらが優先されます。

Importantを使ってCSSを上書きする

もっとも優先度が高い記述法です。

CSS
p {
font-size:10px!important;
}

このように値のあとに「!important」をつけると、最優先でされます。

全体の記述順や、HTMLの構造を無視してCSSを指定できるので非常に便利ですが、使い過ぎには気をつけなければなりません。

importantは「最優先」です。

色々なところに使っていては、どれが本当の最優先なのか分からなくなってしまいます。importantが絡んでいる箇所に修正が発生すると、必要以上に大がかりな作業となってしまうかもしれません。

乱用は控え、本当に必要になったときにだけ使いましょう。

また、影響範囲が大きい箇所への使用にも気を付けてください。他に影響が出ない、ピンポイントのセレクタにのみ使用することをおすすめします。

CSSを上書きする上での注意点

CSSの上書きは多くのサイトで行われています。

まず最初にデフォルトのスタイルを指定し、パーツパーツで個別のスタイルを上書きしていくという方法はスタンダードと言えるでしょう。

しかし、闇雲に上書きを繰り返すのは好ましくありません。

優先順位が邪魔をして、スムーズにCSSの追加ができない可能性があります。

CSSはその場その場で追記していくのではなく、計画性をもって記述しましょう。

そうすることで、簡潔で分かりやすいスマートなCSSが作れます。

修正があった場合なども、必要最小限の上書きで事足りるでしょう。

しかし、大規模なサイトを長期間運用していると、上書きに上書きを重ねるといったことも起きてしまいがちです。

そうなってしまったときは、いつの追記なのか、なんのための追記なのかなどをコメントタグでメモしておくと分かりやすくなります。

後からなんの記述なのか分からなくなってしまうということはよくあるので、おすすめです。

まとめ

CSSの上書きについて解説してきました。

下にある記述が優先されるというのが基本です。

そこにセレクタや要素の特定、入れ子などを織り交ぜて用いることで、効率的な記述が可能になるでしょう。

ただし、無造作にこれらを乱用すると、逆に分かりにくくなってしまうので気を付けてください。

また、Importantは必要最小限に留めるよう心掛けてください。