[CSS ] クラスが設定されていない要素にだけスタイルを適用したい

CSSとクラスは切っても切れない関係です。しかし、時にはクラスが設定されていない要素に対してスタイルを適用したい、というケースもあります。

否定擬似クラスである「:not()」を使うことで、クラスの設定されていない要素にだけスタイルを適用することができます。

クラスが設定されていない要素にスタイルを適用

div:not([class]) {
    〜
}

「class」属性そのものが設定されていない要素に対してスタイルを適用します。

div:not(.xxx) {
    〜
}

特定のクラス名を名指しで指定することもできます。

div:not(.xxx):not(.yyy) {
    〜
}

「:not()」を複数回続けて書くことで、複数のクラスを除外対象にすることができます。

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。