【CSS】:has() の基本ガイド― 結合子などを使った使い方や対応ブラウザについて分かりやすく解説

section:has(video) {
 padding: 10px; 
}

<!-- 適用(videoが内側にある） -->
<section class="intro-video">
  <h2 class="intro__title">概要</h2>
  <p>セクション説明</p>
  <video>____</video>
</section>

<!-- ✖️ 適用されない(videoが内側にない） -->
<section class="intro">
  <h2 class="intro__title">概要</h2>
  <p>セクション説明</p>
</section>

<!-- ✖️ 適用されない(videoが外側にある） -->
<section class="intro">
  <h2 class="intro__title">概要</h2>
  <p>セクション説明</p>
</section>
<video>____</video>

body:has(article):has(aside){
    padding: 24px; 
}　

section:has(+ video) {
    padding: 10px; 
}

<div class="card">
  <span class="badge"></span>
  <span id="vip"></span>
  <p class="title">ここは何色になるか？</p>
</div>

.title { color: black; }
p { color: red; }
.card:has(#vip) .title { color: blue; } 
.card:has(.badge) .title { color: green; }

.form-row:has(.field .error) { 
    gap: .25rem; 
}

<div class="form-row">
  <div class="field">
     <small class="error">エラー</small>
  </div>
</div>

.form-row:has(> .field) { 
    gap: .25rem; 
}

<div class="form-row">
  <div class="field">
     <small class="error">エラー</small>
  </div>
</div>

/* 1. > なし */
.form-row:has(.field) { 
    gap: .25rem; 
}

/* 2. > あり */
.form-row:has(> .field) { 
    gap: .35rem; 
}

<div class="form-row"> <!-- 1. gap: .25rem; が適用される -->
  <div class="contents">
      <div class="field"> <!-- ここに.filedがある -->
         <small class="error">エラー</small>
      </div>
  </div>
</div>

.form-row:has(~ .field) { 
    gap: .25rem; 
}

<!-- 適用される -->
<div class="form-row">
</div>
<div class="field">
   <small class="error">エラー</small>
</div>

<!-- これは適用されない(.fieldがorm-rowの前にいる、後側にない） -->
<div class="field">
   <small class="error">エラー</small>
</div>
<div class="form-row">
</div>

/* 1. + */
.form-row:has(+ .field) { 
    gap: .25rem; 
}

/* 2. ~ */
.form-row:has(~ .field) { 
    gap: .35rem; 
}

<div class="form-row">
</div>
<video>.....</video>
<div class="field"> <!-- ~ は適用される -->
   <small class="error">エラー</small>
</div>

.menu > li { padding: .5rem 1rem; }
.menu > li > a { font-weight: 600; }

/*
  このように書くと全部に(サブメニューにも）当たってしまう
  .menu li { padding: .5rem 1rem; }
  .menu li a { font-weight: 600; }
*/

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li>
    <a href="#">Products</a>
    <ul class="submenu">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

p + p { margin-top: 0; }

<p>本文1。段落。</p>
<p>本文2。直後に続く段落。</p>
<p>本文3。さらに続く段落。</p>

.list > li + li { 
    border-top: 1px solid #e5e7eb; 
    padding-top: .5rem; 
}

<ul class="list">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<p class="post">参考：<a href="#" target="_blank" rel="noopener">外部サイト</a></p>
<p class="post">社内リンク：<a href="#">ポリシー</a></p>

.post:has(a[target="_blank"])::after {
  content: "↗";
  margin-left: .2rem;
  font-size: .85em;
  color: #64748b;
}

<nav class="toc">
  <a href="#faq-1">Q1</a>
  <a href="#faq-2">Q2</a>
</nav>

<section class="faq">
  <h2 id="faq-1">Q1</h2>
  <p>回答…</p>
</section>
<section class="faq">
  <h2 id="faq-2">Q2</h2>
  <p>回答…</p>
</section>

.faq:has(> h2:target) {
  outline: 2px solid #0ea5e9;
  scroll-margin-top: 6rem; /* 固定ヘッダー対策にも */
}

a:hover { opacity:.8; }                    /* マウスが乗った時 */
input:focus { outline:2px solid #60a5fa; } /* その要素にフォーカス */
input:focus-within { outline:2px solid #60a5fa; } /* その要素自身 または その要素の内側のどれかにフォーカス */
input:invalid { border-color:#ef4444; }    /* 検証NG（required/型/範囲など） */
input:valid { border-color:#22c55e; }      /* 検証OK */
input:required { background:#fff; }        /* 必須フィールド */
input:read-only { background:#f5f5f5; }    /* 読み取り専用 */
input:disabled { opacity:.5; cursor:not-allowed; }   /* 無効化 */
input:checked + label { font-weight:700; } /* チェック済み（チェックボックス/ラジオ） */
input:placeholder-shown { color:#9ca3af; } /* プレースホルダーが表示されている */

<form class="contact">
    <label class="field-label" for="email">メール</label>
    <input id="email" type="email" placeholder="aaaa@sample.com" required >
    <small class="error" aria-live="polite">正しいメールアドレスを入力してください。</small>
    <button type="button" class="clear" aria-label="clear">×</button>

    <label class="field-label" for="name">お名前</label>
    <input id="name" type="text">
</form>

/* 01. 入力欄が必須（required） ならラベルに * を自動表示する */
.field-label:has(+ input:required)::after {
  content: "*";
  color: #e11d48;
  font-weight: 700;
}

/* 02. 入力欄が必須（required） でないなら スペース(*を色なし） を自動表示する */
.field-label:has(+ :not(input:required))::after {
  content: "*";
  color: transparent;
}

/* 03. 入力が空でないときだけ「クリア」ボタンを表示 */
.clear { display: none; }
.contact:has(#email[placeholder]:not(:placeholder-shown)) .clear {
  display: inline-block;
}

/* 04 行の内側に :invalid がある かつ フォーカスしていない時だけ色を変える */
.contact {
  padding: .5rem;
  border: 1px solid transparent;
}
.contact:has(:invalid):not(:focus-within) {
  background: #fff6f6;
  border-color: #fca5a5;
}

/* 05 入力が空でない & 不正 & フォーカス外 のときだけエラーを表示 */
.error { display: none; }
.contact:has(#email:not(:placeholder-shown):invalid):not(:focus-within) .error {
  display: inline;
  color: #e11d48;
}