CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － :not の活用

Web APP CSS
スポンサーリンク

:not() を“自在に使いこなす”ための実践ガイド

:not() は CSS の中でも 「特定の要素だけ除外してスタイルを当てる」 という、非常に強力で柔軟な疑似クラスです。
初心者がここを理解すると、CSS 設計が一気にスッキリし、Tailwind CSS でも応用が効くようになります。

ここでは、実務でよく使うパターンを中心に、
CSS と Tailwind の両方でわかりやすく解説します。

:not() の基本文法を理解する

CSS の基本形

.box:not(.active) {
  opacity: 0.5;
}
CSS

これは「.box のうち .active が付いていないもの」に適用されます。

HTML

<div class="box">通常</div>
<div class="box active">アクティブ</div>
HTML

→ .active 以外の .box が半透明になります。

Tailwind での基本形

Tailwind は :not() を標準では持たないため、
任意プロパティ構文（Arbitrary Variants） を使います。

<div class="box [&:not(.active)]:opacity-50">通常</div>
<div class="box active [&:not(.active)]:opacity-50">アクティブ</div>
HTML

Tailwind でも CSS と同じ動きを再現できます。

深掘り：:not() の本質

:not() は「除外」ではなく「条件フィルタ」

例えば、

p:not(:first-child)
CSS

これは「最初の p 以外のすべての p」を意味します。

つまり、

  • 何かを“選ぶ”のではなく
  • “選ばれた中から除外する”

というフィルタのような動きをします。

この考え方を理解すると、複雑なセレクタが一気に読みやすくなります。

よく使う :not() の実践パターン

最後以外の要素にだけ余白を付ける

CSS版

.item:not(:last-child) {
  margin-bottom: 16px;
}
CSS

HTML

<div class="item">1つ目</div>
<div class="item">2つ目</div>
<div class="item">3つ目（最後）</div>
HTML

Tailwind版

<div class="item [&:not(:last-child)]:mb-4">1つ目</div>
<div class="item [&:not(:last-child)]:mb-4">2つ目</div>
<div class="item [&:not(:last-child)]:mb-4">3つ目</div>
HTML

特定のクラスを持たない要素だけデザインする

CSS版

.button:not(.primary) {
  background: #eee;
  color: #333;
}
CSS

HTML

<button class="button">通常ボタン</button>
<button class="button primary">メインボタン</button>
HTML

Tailwind版

<button class="button [&:not(.primary)]:bg-gray-200 [&:not(.primary)]:text-gray-700">
  通常ボタン
</button>

<button class="button primary">
  メインボタン
</button>
HTML

特定のタグ以外をまとめてスタイリング

CSS版

.container > *:not(h2) {
  margin-left: 16px;
}
CSS

HTML

<div class="container">
  <h2>タイトル</h2>
  <p>本文</p>
  <p>本文2</p>
</div>
HTML

Tailwind版

<div class="container">
  <h2>タイトル</h2>
  <p class="[&:not(h2)]:ml-4">本文</p>
  <p class="[&:not(h2)]:ml-4">本文2</p>
</div>
HTML

:not() の“つまずきポイント”を深掘り

1. :not() の中には「1つのセレクタ」しか書けない

これは初心者がよくやるミスです。

/* ❌ これは無効 */
p:not(.a, .b) { … }
CSS

正しくはこう。

/* ⭕ 2つ書きたいなら2回使う */
p:not(.a):not(.b) { … }
CSS

Tailwind でも同じです。

2. :not() は「除外」ではなく「フィルタ」

例えば、

.item:not(:first-child)
CSS

これは「最初の item 以外すべて」。

“最初以外”という意味であって、“2番目だけ”ではない。

3. Tailwind では任意プロパティ構文が必須

Tailwind の強みは、CSS の疑似クラスをそのまま書ける柔軟性です。

<div class="[&:not(:last-child)]:mb-4">
HTML

この構文を覚えると、Tailwind の表現力が一気に広がります。

例題で理解を深める

例題：ニュース一覧で「最後以外の項目にだけ下線を付ける」

CSS版

.news-item:not(:last-child) {
  border-bottom: 1px solid #ddd;
  padding-bottom: 12px;
}
CSS

HTML

<div class="news-item">ニュース1</div>
<div class="news-item">ニュース2</div>
<div class="news-item">ニュース3（最後）</div>
HTML

Tailwind版

<div class="news-item [&:not(:last-child)]:border-b [&:not(:last-child)]:pb-3">
  ニュース1
</div>
<div class="news-item [&:not(:last-child)]:border-b [&:not(:last-child)]:pb-3">
  ニュース2
</div>
<div class="news-item [&:not(:last-child)]:border-b [&:not(:last-child)]:pb-3">
  ニュース3
</div>
HTML

まとめ：:not() を使いこなすコツ

本質

  • :not() は「除外」ではなく「条件フィルタ」
  • nth-child や first-child と組み合わせると強力
  • 1つのセレクタしか書けない（複数はチェーンする）

実務での使いどころ

  • 最後以外に余白を付ける
  • 特定のクラスを持たない要素だけデザイン
  • 特定のタグ以外をまとめて調整
  • リストやカードの整列調整

Tailwind の強み

  • 任意プロパティ構文で CSS と同じ表現が可能
  • セレクタを柔軟に扱えるため、設計の幅が広がる
スポンサーリンク
タイトルとURLをコピーしました