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

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

CSS属性セレクタ否定の使い方とサンプルコードを学ぶイメージCSS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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"を持っているため、デフォルトの文字色で表示されます。

まとめ

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

基本的な使い方から、複数の属性を持たない要素の選択や子要素を対象にした選択まで、幅広い応用例を紹介しました。

これであなたも、CSSの属性セレクタ否定を自在に使いこなすことができるようになりましたね。

今後のWebデザインやコーディングの際に、ぜひ活用してみてください。