:not(セレクタ)で、特定のセレクタを除いた要素を選択できる #
擬似クラスである:not(セレクタ)を使うと、特定のセレクタに一致しない要素を選択できます。[1]
例えば、「〇〇というクラス属性を持たない<p>要素」などです。
/* クラス属性にfancyを持たない<p>要素の文字色を緑にする */
p:not(.fancy) {
color: green;
}
:not([属性名])で、特定の属性がある値を持たない要素を選択する #
:not([属性名])で特定の属性を持たない要素を選択できます。
例えば、「href 属性を持たない<a>要素」などです。
ちなみにこのブログでは、基本的には<a>要素を濃い緑色にしていますが、リンク先を持たない<a>要素は普通の文字色にするためにa:not([href])を使っています。
/* href属性を持たない<a>要素の文字色を黒にする */
a:not([href]) {
color: black;
}
参考 #
[1]: 公式ドキュメント{:target="_blank"}を参考にしました