Tailwind CSS の has クラスを使いこなそう

/* imgタグ含むpタグを指定 */
p:has(img) {
  padding: 1em;
}

/* エラーになった入力欄を含む.formクラスを指定 */
.form:has(input:invalid) {
  border: 1px solid red;
}

/* 最後の子要素がpタグのsectionを指定 */
section:has(p:last-child) {
  margin-bottom: 2em;
}

<!-- チェックボックスがチェックされると背景と文字色を変更する -->
<div class='p-6'>
  <label class='
    rounded-md grid w-fit grid-flow-col gap-2 border p-4
    has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200
  '>
    CheckBox
    <input type='checkbox' class='checked:border-indigo-500' />
  </label>
</div>

<!-- カード内の画像の有無によりテキストのフォントサイズを変更する -->
<div class="grid gap-2 p-4 w-80">
	<div class="group p-4 rounded border bg-white">
		<img
			src="https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3"
			alt="カード画像" 
			class="w-full rounded mb-4 h-48 object-cover" 
		/>
		<h3 class="font-bold text-xl group-has-[img]:text-md group-has-[img]:mb-2">
			カードのタイトル
		</h3>
		<p class="text-gray-600 group-has-[img]:text-xs group-has-[img]:leading-relaxed">
			ここにカードの説明文が入ります。画像の有無によってテキストのスタイルが自動的に調整されます。
		</p>
	</div>

	<div class="group p-4 rounded border bg-white">
		<h3 class="font-bold text-xl group-has-[img]:text-md group-has-[img]:mb-2">
			カードのタイトル
		</h3>
		<p class="text-gray-600 group-has-[img]:text-xs group-has-[img]:leading-relaxed">
			ここにカードの説明文が入ります。画像の有無によってテキストのスタイルが自動的に調整されます。
		</p>
	</div>
</div>

<div class="space-y-4 p-4">
	<select class="peer w-min appearance-none border row-start-1 col-start-1 rounded-lg bg-slate-50 border-slate-300 text-slate-700 p-4">
		<option value="">配送方法を選択してください</option>
		<option value="standard">通常配送</option>
		<option value="express">スピード配送</option>
	</select>

	<div class="peer-has-[option[value='standard']:checked]:block hidden text-gray-600">
		通常配送は3-5営業日でお届けします
	</div>
	<div class="peer-has-[option[value='express']:checked]:block hidden text-red-600">
		スピード配送は翌営業日にお届けします
	</div>
</div>