【CSS】特定の属性を持たない要素のセレクタ | :not()

Sun, 21 Mar 2021 00:00:00 +0000

:not(セレクタ)で、特定の条件を除いた要素を選択できる
:not([属性名])で、特定の属性がある値を持たない要素を選択する
参考

:not(セレクタ)で、特定のセレクタを除いた要素を選択できる
#

擬似クラスである:not(セレクタ)を使うと、特定のセレクタに一致しない要素を選択できます。[1]
例えば、「〇〇というクラス属性を持たない<p>要素」などです。

/* クラス属性にfancyを持たない<p>要素の文字色を緑にする */
p:not(.fancy) {
  color: green;
}

:not([属性名])で、特定の属性がある値を持たない要素を選択する
#

:not([属性名])で特定の属性を持たない要素を選択できます。
例えば、「href 属性を持たない<a>要素」などです。
ちなみにこのブログでは、基本的には<a>要素を濃い緑色にしていますが、リンク先を持たない<a>要素は普通の文字色にするためにa:not([href])を使っています。

疑似クラス on Namtok blog

【CSS】特定の属性を持たない要素のセレクタ | :not()

:not(セレクタ)で、特定のセレクタを除いた要素を選択できる #

:not([属性名])で、特定の属性がある値を持たない要素を選択する #

:not(セレクタ)で、特定のセレクタを除いた要素を選択できる
#

:not([属性名])で、特定の属性がある値を持たない要素を選択する
#