CSS Tutorial
CSS Combinators
Descendant, child, adjacent, and sibling combinators aim at structure instead of extra classes.
Selectors that read the tree
A combinator sits between two selectors and describes how those elements relate in the HTML. You can style “paragraphs inside the studio card” without a new class on every paragraph. Four combinators cover almost every Harbor studio sheet: descendant, child, adjacent sibling, and general sibling.
| Combinator | Written | Means |
|---|---|---|
| Descendant | A space | Inside, at any depth |
| Child | > | Direct child only |
| Adjacent sibling | + | Next sibling immediately after |
| General sibling | ~ | Any later sibling |
Descendant — a space
.studio p matches every p nested inside .studio, including paragraphs inside a nested figure. It is the most common combinator and the easiest to overuse.
Example
<style>
p {
color: #475569;
}
.studio p {
color: #0f766e;
}
.studio strong {
color: teal;
}
</style>
<article class="studio">
<p>Harbor studio opens <strong>8–16</strong> on the north quay.</p>
<p>The sky gallery sits above the teal dock.</p>
</article>
<p>This paragraph is outside the article, so it stays slate gray.</p>A descendant selector reaches through wrappers you add later. If a card starts styling nested lists by accident, tighten it to a child combinator or a more specific class.
Child — greater than
.board > p matches only paragraphs that are direct children of .board. A paragraph inside a nested div is skipped. Use this when the outer shell and the inner content should look different.
Example
<style>
.board > p {
margin: 0;
padding: 0.5rem 0.75rem;
background: teal;
color: white;
}
.board .note {
padding: 0.5rem 0.75rem;
color: #0369a1;
background: #e0f2fe;
}
</style>
<section class="board">
<p>Tide board — Harbor studio</p>
<div class="note">
<p>This inner paragraph is not a direct child, so it misses the teal bar.</p>
</div>
</section>Adjacent sibling — plus
h2 + p matches a paragraph that comes immediately after an h2, same parent. Nothing may sit between them except whitespace. It is the usual way to tighten the first paragraph under a heading.
Example
<style>
h2 {
margin-bottom: 0;
color: teal;
}
h2 + p {
margin-top: 0.25rem;
color: #0f766e;
font-weight: 600;
}
</style>
<h2>Lantern desk</h2>
<p>Walk-ins after 13:00 — this line sits right under the heading.</p>
<p>Slip 4 still closes at 16:00. This second paragraph is not adjacent, so it stays regular.</p>General sibling — tilde
h2 ~ p matches every paragraph that follows that h2 as a sibling, not just the next one. Nested paragraphs inside a later box do not match — they are not siblings.
Example
<style>
.flag {
color: teal;
font-weight: 700;
}
.flag ~ p {
color: #0369a1;
border-left: 3px solid #7dd3fc;
padding-left: 0.6rem;
}
</style>
<p class="flag">North quay</p>
<p>Sky gallery tour at 10:30.</p>
<p>Teal dock stays wet after the tide.</p>Combinators never select backward. p + h2 cannot style a heading that came before the paragraph. Open /css/try and swap the order of the flag and the notes to see matches vanish.
What to do next
Combinators keep class lists short when the HTML already has a clear shape. If two different cards need two looks, a class is still clearer than a long chain. Continue withpseudo-classes for states such as :hover and:first-child, and revisit Selectors for tag, class, and id.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Physics
Only paragraphs inside the write-up
A space is a descendant: article p. A > is a direct child. h2 + p is the adjacent sibling — the first paragraph after the heading. h2 ~ p is every following sibling p.
Combinators aim at structure so you do not sprinkle classes on every paragraph in a lab report.
Example
<style>
article p { color: #075985; }
h2 + p { font-weight: 700; }
</style>
<article>
<h2>Results</h2>
<p>s ≈ 19.6 m at 2 s</p>
<p>Air ignored.</p>
</article>Chemistry
Direct children of a list
ul > li styles top-level items. Nested lists stay default unless you write ul ul li. That is how a reagent list can nest hazards without the inner list going teal.
Example
<style>
ul > li { color: #166534; }
</style>
<ul>
<li>HCl</li>
<li>NaOH</li>
</ul>