CommentOut

CSSで要素にclass指定が無い時を指定する CSSで要素にclass指定が無い時を指定する

CSSで要素にclass指定が無い時を指定する

公開日:  最終更新日:

通常、CSSを記述する場合、classを付けると思います。
しかし、逆にclassがない時はどうでしょうか?

プログラムのif文では『○○に一致する時』『○○に一致しない時』がそれぞれ作れるのだから、きっとCSSにもそういうやつあるだろう

ありました!

クラス指定がない場合を指定できる疑似クラス『:not([class])』

疑似クラスの:notはCSS3で追加されました。
要素:not([条件])で、その条件に一致しない時を指定できます。

以下の記述で、クラスが何も指定されていない時(素の要素の時)のスタイルを指定できます。

p:not([class]) {
    font-size: 16px;
}

以下が実例です。

See the Pen クラス設計 by Uilou (@uilou754) on CodePen.

上記の例では、pタグ自体には何も指定せず

  1. pタグに何もクラスが指定されていない時
  2. pタグにp01クラスが指定されている時

の2種類でスタイルを指定しています。
素のpタグがちゃんと太文字になっていますね。

特定のクラスが無い場合の指定『:not(○○)』

しかし、素の要素だけじゃなく、基本となるスタイルが指定されている中で、追加クラスがない場合の指定をしたい場合もあると思います。

以下の例を見てください。

See the Pen :not(.class)のテスト by Uilou (@uilou754) on CodePen.

上記の例では、両方にtitleクラスがついています。
片方にはstrongクラスが付いており、片方にはstrongクラスが付いていません。

h2.title:not(.strong) {
    color: #555;
    font-weight: normal;
}

h2.titleに.strongが付いていない時を指定しています。

まとめ

通常、正しくCSSの設計が出来ていれば、このような疑似クラスを使うことはないと思いますが、実は私もごく稀にお世話になります。

ただ、今回サンプルを作るにあたって、活用例を提示しようと思いましたが、お世話になることが無さ過ぎて、思いつきませんでした。

このような:not()やCSS4で実装される予定の:has()は、仕様として少し苦しいように思います。
苦しいというのは、それCSSが正しく設計されていれば、必要ないのでは?って思うんですよね。

こういう物を多用するとCSSの解読も複雑化してしまいますし、仕様として定着しないような気がするので、紹介しておいてあれですけど、あまりお世話にならない方がコードの美しい状態を維持できると思います。

宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。