CSS Combinators

Question 1

Descendant Combinator (space)

Selects elements that are inside another element, at any level.

```
parent descendant { style }
~~~

Answer 1

div p {
  color: red;
}
<div>
  <p>This is inside a div.</p>
  <section>
    <p>This is also inside a div.</p>
  </section>
</div>
<p>This is outside.</p>

Both <p> elements inside <div> turn red, but not the one outside.

Question 2

Child Combinator (> )

Selects direct children only (not deeper levels).

parent > child { style }

Answer 2

div > p {
  color: blue;
}
<div>
  <p>Direct child</p>
  <section>
    <p>Not a direct child</p>
  </section>
</div>

Only the first <p> turns blue, not the nested one.

Question 3

Adjacent Sibling Combinator (+ )

Selects an element that comes immediately after another element (same parent).

element1 + element2 { style }

Answer 3

h1 + p {
  color: green;
}
<h1>Heading</h1>
<p>This is styled.</p>
<p>This is NOT styled.</p>

Only the first <p> after <h1> turns green.

Question 4

General Sibling Combinator (~ )

Selects all siblings that come after another element (same parent, but not necessarily next).

element1 ~ element2 { style }

Answer 4

h1 ~ p {
  color: purple;
}
<h1>Heading</h1>
<p>Styled</p>
<p>Also styled</p>

All <p> elements after <h1> turn purple.

Question 5

Combining Combinators

Answer 5

div > p + span {
  color: orange;
}
<div>
  <p>Paragraph</p>
  <span>This span is styled.</span>
  <span>This is NOT styled.</span>
</div>

Only the first <span> after <p> inside <div> is orange.</span>