More than 3 years have passed since last update.

【初心者でもわかる】条件をつけて、:not()で〇〇以外にだけCSSを当てる方法

Posted at 2021-01-24

どうも7noteです。特定の要素以外にCSSを当てる書き方を解説

条件付きでCSSを当てられたら便利だと思いませんか？
そんな便利な方法(書き方)があります。

index.html

<p>pタグ</p>
<p>pタグ</p>
<p>pタグ</p>
<p>pタグ</p>

style.css

/* 3番目の要素以外を赤文字にする */
p:not(:nth-child(3)) {
color: #f00;
}

このようにカッコ()の中に特定のセレクタを指定することで、その要素をCSSの適応範囲から除外することができます。

:から始まるような疑似セレクタだけでなく、特定のクラス名がついていないものにだけ指定することもできます。

index.html

<p>pタグ</p>
<p class="check">pタグ</p>
<p>pタグ</p>
<p class="check">pタグ</p>

style.css

/* クラス.check以外を赤文字にする */
p:not(.check) {
color: #f00;
}

複数の種類のクラスがあるが、一切クラスのついていないものにだけCSSを効かせる書き方があります。

index.html

<p class="point">pタグ</p>
<p>pタグ</p>
<p class="crnt">pタグ</p>
<p>pタグ</p>

style.css

/* クラスがついていないものを赤文字にする */
p:not([class]) {
color: #f00;
}

##まとめ

頻繁に使うことはないですが、知ってるのと知らないのとでは作業スピードも対応幅も変わってくるtipsです。
ぜひ使ってみてほしいです！