先日ブログ本文内のh2属性を装飾して見出しっぽくしようとしたら、ブログタイトル下のブログ紹介文もh2属性を使っていたらしく何もないのに見出しの枠だけ出てしまって困っていたところ、CSS3で追加された疑似否定クラスというのを使えばいいらしいということがわかりました。
疑似否定クラス not
こっちはCSSのサンプル
|
1 2 3 4 5 |
h2 { font-size: 24px; font-size: 1.5rem; } h2:not([class]) { font-size: 24px; font-size: 1.5rem; margin: 0 0 1.2em; padding: 0.5em;} |
続いてHTMLのサンプル
|
1 2 |
<h2 class="description">楽しいブログ</h2> <h2>これは見出し</h2> |
このように設定した場合、class属性のあるブログ説明側はh2のスタイルが適用され、class属性のない見出しにはh2:not([class])が適用されます。
今日のまとめ
- CSSではまったよ！
- 特定の属性を含まないタグのみ適用できるようになったよ！
- CSS3からなのかこれ・・・
