ミギムキ

[CSS] クラスを持たないタグにだけスタイルを適用したい

CSSのスタイルは、クラスをつけて定義するのが一般的です。

しかし、あえてクラスがついていないタグに対してスタイルを指定したい場合もあります。

そんな変則的なケースにも対応できるセレクタが用意されています。

サンプルコード

h2:not([class]) { /* よしなにスタイル */ }

仕組み、解説、補足など

[class]で属性が定義されているかを判定しています。

これに「:not」セレクタをつけることで、class属性がないもの、つまりクラスが設定されていないタグを指定することができます。

あるクラスがついていないタグにだけスタイルを適用したい

h2:not([.title]) { /* よしなにスタイル */ }

クラス名を指定して、そのクラスが設定されていないときにだけスタイルを適用したいときは、このように記載します。

ご質問など受け付けています

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

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