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タグ自体には何も指定せず
- pタグに何もクラスが指定されていない時
- 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の解読も複雑化してしまいますし、仕様として定着しないような気がするので、紹介しておいてあれですけど、あまりお世話にならない方がコードの美しい状態を維持できると思います。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。