【CSS】一部のCSSだけ変更する

コーディング
スポンサーリンク

一部のCSSだけを変更したい

指定する方法は色々ありますが、変更したい部分が一部分ならこの方法が一番手っ取り早くてわかりやすいと思います。

いちいちその部分だけクラスを書き換えたりとややこしいことをする必要はありません。

例えばこのようにボックスをテキストが並んだデザインがあるとします。
この真ん中のボックスとテキストにだけ別のCSSを適用させたいと思います。

See the Pen
dyXaxLP
by nzm (@nzm)
on CodePen.

 

変更したい部分のHTMLにクラスを追加

今回は3つ並んだボックスの真ん中だけを変更したいので、真ん中のクラスにsecondという名前のクラスを追加します。

 

CSSは後に書いた方が優先される

HTMLにクラスを追加したので、真ん中のボックスはsampleとsecondの2つのクラスを持っているということになります。
複数のクラスを持つものにも書いた分のCSSは適用され、優先度の高い方から順に適用されます。

今回は、先にベースとなるsampleのCSSを書いているのでsampleのCSSが適用され、後から書いたsecond部分だけが上書きされるということになります。

 

今回は真ん中のボックスのフレックスアイテムを反転させて色も少しだけ薄いグレーにしてみました。

See the Pen
pobGMXK
by nzm (@nzm)
on CodePen.

 

この方法なら変更したい部分に一からCSSを書かなくても、これまで書いたCSSを引き継ぎながらも新しいCSSを追加できるのでかなり便利です。

ただし引き継ぎたくないCSSも無条件に引き継いでしますので、その時は少し注意が必要です。
特にpaddingやmarginの余白、positionなどで位置を調節してる場合などは気をつけてください。

コメント

タイトルとURLをコピーしました