【CSS】属性セレクタ否定をマスター！簡単3ステップで徹底解説

はじめに
●基本的な使い方
●応用例1: 複数の属性を持たない要素を選択する
●応用例2: 要素の子要素を対象に属性セレクタ否定を適用する
まとめ

はじめに

CSSの属性セレクタに否定を使って、特定の属性を持たない要素を選択したいと思ったことはありませんか？

この記事では、初心者でも簡単に理解できるように、CSSの属性セレクタ否定の使い方や応用例、サンプルコードを徹底解説していきます。

記事を最後まで読むと、属性セレクタ否定を自在に使いこなすことができるようになりますよ！

●基本的な使い方

まずは、属性セレクタ否定の基本的な使い方を見ていきましょう。

属性セレクタ否定は、次のように記述します。

要素:not([属性名="属性値"]) {
  /* スタイル */
}

これは、「属性名=”属性値”」を持たない要素に対してスタイルを適用するという意味になります。

では、実際にサンプルコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>属性セレクタ否定サンプル</title>
  <style>
    a:not([target="_blank"]) {
      color: red;
    }
  </style>
</head>
<body>
  <a href="https://example.com" target="_blank">新しいタブで開くリンク</a>
  <a href="https://example.com">同じタブで開くリンク</a>
</body>
</html>

このサンプルでは、target="_blank"属性を持たない<a>要素に対して、文字色を赤に設定しています。

結果として、「新しいタブで開くリンク」はデフォルトの文字色で表示され、一方で「同じタブで開くリンク」は赤色で表示されます。

●応用例1: 複数の属性を持たない要素を選択する

属性セレクタ否定を応用して、複数の属性を持たない要素を選択することもできます。

その場合、:not()セレクタを複数組み合わせることで実現できます。

例えば、target="_blank"属性とrel="noopener"属性の両方を持たない<a>要素を選択したい場合、下記のように記述します。

a:not([target="_blank"]):not([rel="noopener"]) {
  /* スタイル */
}

サンプルコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>属性セレクタ否定応用例1</title>
  <style>
    a:not([target="_blank"]):not([rel="noopener"]) {
      color: red;
    }
  </style>
</head>
<body>
  <a href="https://example.com" target="_blank" rel="noopener">新しいタブで開くリンク1</a>
  <a href="https://example.com" target="_blank">新しいタブで開くリンク2</a>
  <a href="https://example.com">同じタブで開くリンク</a>
</body>
</html>

この例では、「新しいタブで開くリンク1」と「新しいタブで開くリンク2」は、どちらもtarget="_blank"属性を持っているため、デフォルトの文字色で表示されます。

一方で、「同じタブで開くリンク」はtarget="_blank"属性もrel="noopener"属性も持っていないため、赤色で表示されます。

●応用例2: 要素の子要素を対象に属性セレクタ否定を適用する

属性セレクタ否定を使って、特定の要素の子要素に対してスタイルを適用することもできます。

例えば、<ul>要素の子要素である<li>要素のうち、class="selected"を持たないものに対してスタイルを適用したい場合、下記のように記述します。

ul > li:not(.selected) {
  /* スタイル */
}

サンプルコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>属性セレクタ否定応用例2</title>
  <style>
    ul > li:not(.selected) {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>リスト1</li>
    <li class="selected">リスト2</li>
    <li>リスト3</li>
  </ul>
</body>
</html>

この例では、<li>要素のうち、class="selected"を持たないもの（「リスト1」と「リスト3」）に対して文字色を赤に設定しています。

「リスト2」はclass="selected"を持っているため、デフォルトの文字色で表示されます。