<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Child selector</title>
<style>
li { padding: 2px 6px; margin: 2px 0; }
.all li { background: #e5e7eb; } /* descendant: every level */
.direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
</style>
</head>
<body>
<ul class="all direct">
<li>Top level: gray and blue edge</li>
<li>Top level: gray and blue edge
<ul>
<li>Nested: gray only</li>
<li>Nested: gray only</li>
</ul>
</li>
</ul>
</body>
</html>
兄弟結合子: + と ~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Siblings</title>
<style>
p { margin: 4px 0; padding: 4px 8px; }
h2 + p { background: #f59e0b; } /* only the first p after h2 */
h2 ~ p { color: #2563eb; } /* every p after h2 */
</style>
</head>
<body>
<p>Before the heading: untouched.</p>
<h2>Heading</h2>
<p>Right after h2: amber and blue.</p>
<p>Later sibling: blue only.</p>
<p>Later sibling: blue only.</p>
</body>
</html>
兄弟は前方しか見ません。「前の兄弟」を選ぶ結合子はありませんが、:has() で表現できます。h2:has(+ p) は直後に p が続く h2 に一致します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Space matters</title>
<style>
p.note { background: #e5e7eb; } /* a p that has .note */
p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
</style>
</head>
<body>
<p class="note">p.note: gray background</p>
<p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>
