:has()疑似クラスを使いこなす！次世代CSSの実用例集

.notice:has(em),
.notice:has(a) {
  background-color: #fff3cd;
  padding: 10px;
  border-left: 4px solid #ffcc00;
}

<div class="notice">
  <em>重要</em>なお知らせです。
</div>

.alert-box:has(strong):has(button) {
  border: 2px dashed #c00;
  background: #ffe6e6;
}

<div class="alert-box">
  <strong>警告！</strong>
  <button>閉じる</button>
</div>

.card:has(> img) {
  border-top: 5px solid #007bff;
}

<div class="card">
  <img src="header.jpg" alt="サムネイル">
  <div class="text">コンテンツ</div>
</div>

.label:has(+ .input-field) {
  font-weight: bold;
  color: #00796b;
}

<label class="label">名前</label>
<input class="input-field" type="text">

.comment:not(:has(img)) {
  padding-left: 20px;
  background-color: #f9f9f9;
}

<div class="comment">テキストのみのコメント</div>

.panel:has(a:hover) ~ img {
  outline: 2px dashed #cc0000;
}

<div class="panel">
  <a href="#">画像を見る</a>
</div>
<img src="photo.jpg" alt="表示される画像">

.options:has(input[type="checkbox"]:checked) {
  border: 2px solid crimson;
}

<div class="options">
  <input type="checkbox" id="agree">
  <label for="agree">同意します</label>
</div>

.gallery:has(> :last-child:nth-child(4)) {
  background-color: #e0f7fa;
}

<div class="gallery">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
</div>

.profile {
  display: flex;
  flex-direction: column;
}

.profile:has(img) {
  flex-direction: row;
  align-items: center;
}

.profile img {
  margin-right: 15px;
}

<div class="profile">
  <img src="user.jpg" alt="写真">
  <p>ユーザー情報です。</p>
</div>