CSSセレクターを使いこなして、思い通りのWebページデザインを実現しよう

2024-04-02

HTML、CSS、CSSセレクター：特定のクラスや属性を持たない要素を選択する

答え：はい、可能です。

方法：

否定擬似クラス :not() を使う

:not() を使って、除外したいセレクターを指定します。
```
/* .button 以外すべての要素に赤枠 */
.button:not(.button) {
  border: 1px solid red;
}
```

属性セレクターと [] 演算子を使って、特定の属性を持たない要素を選択できます。

/* `data-type` 属性を持たない要素に青背景 */
[data-type]:not([data-type]) {
  background-color: blue;
}

汎用セレクター * と :not() を組み合わせて、すべての要素から除外したい要素を除外できます。
```
/* .button 以外すべての要素に太字 */
*:not(.button) {
  font-weight: bold;
}
```

補足：

:not() は擬似クラスなので、他のセレクターと組み合わせて使用できます。
複数の条件を指定する場合は、 , で区切ります。

例：

/* 
   - .button ではない要素
   - `data-type` 属性が "primary" ではない要素
*/
*:not(.button):not([data-type="primary"]) {
  color: green;
}

注意事項：

古いブラウザでは :not() をサポートしていない場合があります。

上記以外にも、JavaScript を使って要素を選択することもできます。

HTML:

<div class="container">
  <div class="box button">ボタン</div>
  <div class="box">ボックス</div>
  <div class="box button">ボタン</div>
  <div class="box">ボックス</div>
</div>

CSS:

/* .button 以外すべての要素に赤枠 */
.button:not(.button) {
  border: 1px solid red;
}

/* `data-type` 属性を持たない要素に青背景 */
[data-type]:not([data-type]) {
  background-color: blue;
}

/* .button 以外すべての要素に太字 */
*:not(.button) {
  font-weight: bold;
}

結果:

.button 以外のすべての要素に赤枠が表示されます。
data-type 属性を持たない要素に青背景が表示されます。

デモ:

https://www.ufret.jp/song.php?data=126006

上記のサンプルコードは、あくまでも例です。
実際のコードは、要件に合わせて変更する必要があります。

特定のクラスや属性を持たない要素を選択するその他の方法

子孫セレクター > と + を使って、特定の要素の子孫要素のうち、特定のクラスや属性を持たない要素を選択できます。
```
/* 
   - .container 内の .box 要素
   - .button ではない要素
*/
.container > .box:not(.button) {
  color: red;
}
```

JavaScript を使って、特定のクラスや属性を持たない要素を選択できます。

const elements = document.querySelectorAll(".box");
for (const element of elements) {
  if (!element.classList.contains("button")) {
    element.style.color = "red";
  }
}