CSS Combinations Playground

CSS Combination Playground

Master selectors through interactive experiments

Why Combinations Matter

CSS combinations let you target elements with surgical precision. Think of them like special filters for your web page elements.

🔍 Precision

Target exactly what you need without extra classes

🧩 Modularity

Combine simple selectors for complex targeting

⚡ Performance

More efficient than adding countless classes

The CSS Combination Family

Interactive Combination Visualizer

Click elements to see how different combinations affect selection

<div id="div1">Parent
<p id="p1">First paragraph</p>
<div id="div2">Child div
<p id="p2">Nested paragraph</p>
</div>
<p id="p3">Second paragraph</p>
</div>

CSS Rule:

div p { color: red; }

Result:

Parent

First paragraph

Child div

Nested paragraph

Second paragraph

The Four Combination Types

Descendant Combinator

(space character)

A B { }

Selects all B elements inside A (at any nesting level)

Example:

article p { color: blue; }

Makes all paragraphs blue within any article

Child Combinator

(greater-than sign >)

A > B { }

Selects only B elements that are direct children of A

Example:

ul > li { padding: 10px; }

Only styles direct li children of ul (not nested lists)

Adjacent Sibling

(plus sign +)

A + B { }

Selects B that immediately follows A (same parent level)

Example:

h2 + p { margin-top: 0; }

Only styles paragraphs that come right after h2

General Sibling

(tilde ~)

A ~ B { }

Selects all B elements that are siblings of A (after A)

Example:

h2 ~ p { color: gray; }

Styles all paragraphs that are siblings of h2 (after it)

Combinator Challenge

Test your understanding with this interactive quiz

Question 1: Which selector would target only the direct children?

<div class="container">
    <p>First paragraph</p>
    <div>
        <p>Nested paragraph</p>
    </div>
    <p>Last paragraph</p>
</div>

Question 2: Which selector would target all paragraphs following an h2?

<h2>Title</h2>
<p>First paragraph</p>
<div>Content</div>
<p>Second paragraph</p>

Real-world Applications

Navigation Menus

Use child combinators to style multi-level dropdowns without affecting nested content.

nav > ul > li { }

Form Layouts

Style labels differently when they follow checkboxes using adjacent sibling combinator.

input[type="checkbox"] + label { }

Card Layouts

Use general sibling combinator to create consistent spacing between cards.

.card ~ .card { margin-top: 20px; }

CSS Combinator Cheat Sheet

Quick reference for all combination types

Combinator Syntax Example Matches
Descendant A B article p All p elements inside article
Child A > B ul > li Only direct li children of ul
Adjacent Sibling A + B h2 + p First p immediately after h2
General Sibling A ~ B h2 ~ p All p elements after h2 (same parent)