2026年時点で「実務で使える／使い始めたい新しめのCSSとして、Web制作の現場（特にコーディング・WordPress案件）を想定しています。
サンプルコード付き

1. CSS Nesting（ネイティブ入れ子）【実用段階】

Sass不要で、素のCSSにネストが書けるようになりました。

Before（従来）

.card {}
.card .title {}
.card .text {}

.card {}
.card .title {}
.card .text {}

After（CSS Nesting）

.card {
  padding: 16px;

  .title {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .text {
    color: #666;
  }
}

.card {
  padding: 16px;

  .title {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .text {
    color: #666;
  }
}

✅ 2026年はほぼ安心して使用可
👉 WordPressのテーマCSSでもかなり読みやすくなります

2. :has() 擬似クラス【レイアウト制御の革命】

「子要素を条件に親をスタイル」できる、待望の機能。

例：画像を含むカードだけ装飾

.card:has(img) {
  border: 2px solid #4da3ff;
}

.card:has(img) {
  border: 2px solid #4da3ff;
}

例：エラー文言がある場合だけフォームを赤枠に

.form:has(.error) {
  border: 1px solid red;
}

.form:has(.error) {
  border: 1px solid red;
}

💡 JSを書かずに状態管理が可能
👉 フォーム・カードUI・管理画面系で超便利

3. Container Queries（本格普及）

「画面サイズではなく、親コンテナのサイズでレスポンシブ」

コンテナ定義

.card-list {
  container-type: inline-size;
}

.card-list {
  container-type: inline-size;
}

コンテナ幅に応じたスタイル

@container (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@container (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

📱 WPのブロック・再利用コンポーネントと相性抜群

4. :where() / :is()【詳細度コントロール】

:where()（詳細度0）

:where(h1, h2, h3) {
  margin-bottom: 0.5em;
}

:where(h1, h2, h3) {
  margin-bottom: 0.5em;
}

:is()（詳細度あり）

.card :is(h2, h3) {
  color: #333;
}

.card :is(h2, h3) {
  color: #333;
}

✅ CSS設計（BEM / FLOCSS）がかなり楽に
👉 reset・共通スタイルに最適

5. @layer（CSSレイヤー管理）

CSSの読み込み順問題を構造的に解決。

レイヤー定義

@layer reset, base, layout, component, utility;

@layer reset, base, layout, component, utility;

各レイヤー

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer component {
  .btn {
    background: blue;
    color: white;
  }
}

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer component {
  .btn {
    background: blue;
    color: white;
  }
}

📦 プラグインCSS・自作CSSの衝突対策に最強

6. 新しい単位 dvh / svh / lvh【SP対応改善】

iOSのアドレスバー問題を解決。

.hero {
  min-height: 100dvh;
}

.hero {
  min-height: 100dvh;
}

👉 スマホファースト案件では必須級

7. accent-color【フォームUI統一】

チェックボックスやラジオを簡単にブランドカラー化。

input[type="checkbox"],
input[type="radio"] {
  accent-color: #0a7cff;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #0a7cff;
}

💡 JS・画像不要で実装可能
👉 管理画面・フォーム系におすすめ

8. @scope（これから伸びる・一部対応）

スタイルの影響範囲を明示できる新構文。

@scope (.card) {
  h2 {
    color: navy;
  }
}

@scope (.card) {
  h2 {
    color: navy;
  }
}

⚠️ 2026年は限定利用 or フォールバック前提
👉 将来のCSS設計に備えて知っておくと◎

実務向けおすすめ優先度（2026）

WordPressコーダーの対しての情報 まとめ

• Sass不要構成が現実的に可能
• ブロックテーマ × Container Queries は相性抜群
• @layerで「テーマCSS vs プラグインCSS」の事故防止
• 管理画面・フォームは:has()でJS削減

chatGPTよりまとめ