CSS セレクタのレシピ - :has() 擬似クラス編

<div class="card-list">
  <div class="card">
    <p class="card-category --coding">
      ウェブ標準
    </p>
    <p class="card-desc">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <p class="card-category --a11y">
      アクセシビリティ
    </p>
    <p class="card-desc">Consectetur adipisicing elit. sed do eiusmod tempor.</p>
  </div>
  <div class="card">
    <p class="card-category --perf">
      パフォーマンス
    </p>
    <p class="card-desc">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <!-- ... -->
</div>

<style>
.card {
  --accent: hsl(180 100% 22%);

  padding: 16px;
  border-block-start: solid 8px var(--accent);
  position: relative;
  z-index: 1;
  background: #fff;
  color: #042020;
}
.card:has(.--a11y) {
  --accent: hsl(304 100% 22%);
}
.card:has(.--perf) {
  --accent: hsl(228 100% 22%);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--accent);
  opacity: 0.2;
}
.card-category {
  background-color: var(--accent);
  color: #fff;
}
</style>

.card:has(.--a11y) {
  --accent: hsl(304, 100%, 22%);
}
.card:has(.--perf) {
  --accent: hsl(228, 100%, 22%);
}

<section>
  <p>あのイーハトーヴォのすきとおった風...</p>
  <h2>見出し</h2>
</section>
<section>
  <p>あのイーハトーヴォのすきとおった風...</p>
  <p class="copy">コピー</p>
  <h2>見出し</h2>
</section>

<style>
:where(h2, .copy:has(+ h2)) {
  margin-block-start: 40px;
}
.copy + h2 {
  margin-block-start: 0;
}
</style>

<div class="projects">
  <div class="projects-list">
    <!-- ... -->
    <div class="projects-item">
      <img src="..." alt="RECTGRAPH のロゴ" id="rectgraph">
    </div>
    <div class="projects-item">
      <img src="..." alt="I/O 3000 のロゴ" id="io3000">
    </div>
    <!-- ... -->
  </div>
  <div class="projects-controls">
    <!-- ... -->
    <button type="button" aria-controls="rectgraph" class="projects-btn">
      <span class="projects-btn-inner">RECTGRAPH</span>
    </button>
    <button type="button" aria-controls="io3000" class="projects-btn">
      <span class="projects-btn-inner">I/O 3000</span>
    </button>
    <!-- ... -->
  </div>
</div>

<style>
.projects-item img {
  opacity: 0.2;
  transition: opacity 0.2s ease;
}
.projects:has([aria-controls="rectbeats"]:active) #rectbeats,
.projects:has([aria-controls="rectgraph"]:active) #rectgraph,
.projects:has([aria-controls="io3000"]:active) #io3000,
.projects:has([aria-controls="moji-roll"]:active) #moji-roll,
.projects:has([aria-controls="logo-lacra"]:active) #logo-lacra {
  opacity: 1;
}
</style>

<form class="form">
  <div class="form-item">
    <label for="example-name">名前</label>
    <input type="text" id="example-name" required>
  </div>
  <div class="form-item">
    <label for="example-email">メールアドレス</label>
    <input type="email" id="example-email" required>
  </div>
</form>

<style>
/* valid */
.form-item:has(:user-valid) {
  background-color: #e9f3ef;
}
.form-item:has(:user-valid)::after {
  content: '✅';
}
/* invalid */
.form-item:has(:user-invalid) {
  background-color: #fce8e8;
}
.form-item:has(:user-invalid)::after {
  content: '❌';
}
</style>

<div class="color-mode">
  <p class="color-mode-text">
    Lorem ipsum dolor sit...
  </p>
  <input type="checkbox" role="switch" class="color-mode-switch">
</div>

<style>
.color-mode {
  --bg-color   : #fff;
  --text-color : #042020;
}
.color-mode-text {
  background-color: var(--bg-color);
  color: var(--text-color);
}
/* ダークモード */
.color-mode:has(.color-mode-switch:checked) {
  --bg-color   : #042020;
  --text-color : #cfdddd;
}
</style>

<div class="filter">
  <div class="filter-header">
    <label for="filter-select" class="filter-label">Filter: </label>
    <select id="filter-select" class="filter-select">
      <option value="all">All</option>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
    </select>
  </div>
  <table class="filter-table">
    <thead>
      <tr>
        <th>No.</th>
        <th>カテゴリ</th>
      </tr>
    </thead>
    <tbody>
      <tr class="filter-item --apple">
        <td>1</td>
        <td>Apple</td>
      </tr>
      <tr class="filter-item --banana">
        <td>2</td>
        <td>Banana</td>
      </tr>
      <!-- -->
    </tbody>
  </table>
</div>

<style>
.filter:has([value="apple"]:checked) .filter-item:not(.--apple),
.filter:has([value="banana"]:checked) .filter-item:not(.--banana) {
  display: none;
}
</style>

<nav class="nav">
  <ul class="nav-list">
    <li><a href="/">Home</a></li>
    <li><a href="/services/">Services</a></li>
    <li><a href="/projects/">Projects</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
  <span class="nav-chaser"></span>
</nav>

<style>
.nav {
  --columns: 4;
  --distance: -1;

  position: relative;
  overflow: hidden;
}
.nav-list {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
}
.nav-chaser {
  inline-size: calc(100% / var(--columns));
  block-size: 4px;
  display: block;
  position: absolute;
  inset-block-end: 0;
  background-color: #007373;
  transition: translate 0.4s ease;
  translate: calc(100% * var(--distance)) 0;
  pointer-events: none;
}
.nav:has(li:nth-child(1) > :where(a:hover, a:focus-visible)) {
  --distance: 0;
}
.nav:has(li:nth-child(2) > :where(a:hover, a:focus-visible)) {
  --distance: 1;
}
.nav:has(li:nth-child(3) > :where(a:hover, a:focus-visible)) {
  --distance: 2;
}
.nav:has(li:nth-child(4) > :where(a:hover, a:focus-visible)) {
  --distance: 3;
}
</style>

<form class="quiz">
  <div class="quiz-section">
    <dl class="quiz-list">
      <dt class="quiz-q">
        <span class="quiz-icon">Q1</span> CSS の寛容なセレクタリストに含まれないものは次のうちどれか
      </dt>
      <dd class="quiz-a">
        <label class="quiz-label">
          <!-- 正解のチェックボックス -->
          <input type="checkbox" class="quiz-checkbox" data-correct>:nth-child()
        </label>
      </dd>
      <dd class="quiz-a">
        <label class="quiz-label">
          <!--  不正解のチェックボックス -->
          <input type="checkbox" class="quiz-checkbox">:where()
        </label>
      </dd>
      <!-- ... -->
    </dl>
    <!-- 「Next」ボタン -->
    <label class="btn">
      Next<input type="checkbox" class="quiz-next">
    </label>
  </div>
  <!-- ... -->
</form>

<style>
.quiz {
  --correct  : #00885b;
  --incorect : #d00;
}
.quiz-label {
  border: solid 1px currentColor;
  background-color: #fff;
}
/* 不正解（デフォルト） */
.quiz-label:has(input:checked) {
  border-color: var(--incorect);
  background-color: color-mix(in srgb, var(--incorect) 10%, transparent);
}
/* 正解 */
.quiz-label:has(input[data-correct]:checked) {
  border-color: var(--correct);
  background-color: color-mix(in srgb, var(--correct) 10%, transparent);
}
</style>

<form>
  <div class="memory">
    <!-- `value="1"` -->
    <label class="memory-item">
      <input type="checkbox" value="1">
      <img src="..." alt="カード" width="100" height="100" loading="lazy">
      <span class="memory-check"></span>
    </label>
    <!-- `value="2"` -->
    <label class="memory-item">
      <input type="checkbox" value="2">
      <img src="..." alt="カード" width="100" height="100" loading="lazy">
      <span class="memory-check"></span>
    </label>
    <!-- `value="1"` -->
    <label class="memory-item">
      <input type="checkbox" value="1">
      <img src="..." alt="カード" width="100" height="100" loading="lazy">
      <span class="memory-check"></span>
    </label>
    <!-- `value="2"` -->
    <label class="memory-item">
      <input type="checkbox" value="2">
      <img src="..." alt="カード" width="100" height="100" loading="lazy">
      <span class="memory-check"></span>
    </label>
    <!-- ... -->
  </div>
  <button type="reset" class="btn">リセット</button>
</form>

<style>
/* ペアがマッチしたときの変数を用意 */
.memory-item {
  --match: 0;
}
/* チェック済みの `value` が同じ場合に CSS 変数の値を変更 */
.memory:not(:has([value="1"]:not(:checked))) .memory-item:has([value="1"]),
.memory:not(:has([value="2"]:not(:checked))) .memory-item:has([value="2"]),
.memory:not(:has([value="3"]:not(:checked))) .memory-item:has([value="3"]),
.memory:not(:has([value="4"]:not(:checked))) .memory-item:has([value="4"]),
.memory:not(:has([value="5"]:not(:checked))) .memory-item:has([value="5"]),
.memory:not(:has([value="6"]:not(:checked))) .memory-item:has([value="6"]) {
  --match: 1;
  pointer-events: none;
}
/* CSS 変数によってチェックマークが表示される */
.memory-check {
  opacity: var(--match);
}
.memory-check::after {
  content: '✅';
}
/* すべてのカードが選択された状態 */
.memory:not(:has(input:not(:checked))) {
  background-color: #007373;
  transition: background-color 0.4s ease;
}
</style>

<div class="game">
  <div class="game-target">
    <img src="..." alt="キャラクター" width="54" height="100" loading="lazy">
  </div>
  <div class="game-stick">
    <label class="game-stick-label">
      <input type="checkbox" data-stick="true">
    </label>
    <label class="game-stick-label">
      <!-- 当たりのスティック -->
      <input type="checkbox" data-stick="hit">
    </label>
    <label class="game-stick-label">
      <input type="checkbox" data-stick="true">
    </label>
    <!-- ... -->
    <p class="game-score" aria-live="polite"></p>
  </div>
</div>

<style>
.game-target {
  transition: translate 1s steps(10);
}
.game:has([data-stick="hit"]:checked) .game-target {
  translate: 0 -100px;
}
</style>

.game-stick {
  counter-reset: score;
}
[data-stick="true"]:checked {
  counter-increment: score 1000;
}
.game-score::after {
  content: counter(score);
}
/* 初期値 */
.game:not(:has([data-stick="true"]:checked)) .game-score::after {
  content: '0000';
}