• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Combinators

← Previous Next →

🔹 What Are CSS Combinators?

CSS Combinators define relationships between elements. They allow you to target elements based on their structural relationship to other elements in the DOM.

There are 4 main types of CSS combinators:

  1. Descendant (space)

  2. Child (>)

  3. Adjacent sibling (+)

  4. General sibling (~)

🔸 1. Descendant Combinator (A B)

Targets all B elements inside A, at any depth.

div p {
  color: blue;
}

All <p> elements inside <div>, including nested ones.

🔸 2. Child Combinator (A > B)

Targets B elements that are direct children of A.

ul > li {
  list-style-type: square;
}

Only <li> elements directly inside <ul> (not deeper nested).

🔸 3. Adjacent Sibling Combinator (A + B)

Targets B element immediately after A, sharing the same parent.

h2 + p {
  color: red;
}

Styles the first <p> that comes right after an <h2>.

🔸 4. General Sibling Combinator (A ~ B)

Targets all B elements after A, sharing the same parent.

h2 ~ p {
  font-style: italic;
}

All <p> elements that are siblings after an <h2>.

Practice Questions

Q1. Style all <p> elements inside a <section>.

Q2. Change color of direct <li> children of a <ul>.

Q3. Style a <p> that comes right after any <h1>.

Q4. Italicize all paragraphs after an <h2> in a section.

Q5. Remove bullet from top-level <li> only.

Q6. Change font of <span> inside <div class="note">.

Q7. Apply border to input elements that come directly after a <label>.

Q8. Make all sibling <img> tags after a <figure> 50% width.

Q9. Target only the first <p> after a <div> tag.

Q10. Apply underline to all <a> tags that come after a <nav>.

CSS Combinators Quiz

Q1: Which combinator selects any descendant?

A. Space (A B)
B. Greater-than (A > B)
C. Plus (A + B)
D. Tilde (A ~ B)

Q2: Which combinator selects only direct children?

A. A B
B. A > B
C. A + B
D. A ~ B

Q3: Which combinator selects an element immediately following another?

A. A > B
B. A B
C. A + B
D. A ~ B

Q4: Which combinator selects all siblings after an element?

A. A ~ B
B. A + B
C. A > B
D. A B

Q5: What does div p select?

A. All <p> inside <div>
B. Only first <p>
C. <div> following <p>
D. All <div> and <p>

Q6: What does ul > li select?

A. All li in the document
B. Only direct li children of ul
C. All nested li
D. First li only

Q7: What does h2 + p select?

A. All <p> inside <h2>
B. Every <p> in the page
C. First <p> immediately after <h2>
D. No element

Q8: What does h2 ~ p select?

A. All <p> siblings that come after <h2>
B. All <p> before <h2>
C. Nested <p> only
D. None of the above

Q9: Which combinator is most specific (least inclusive)?

A. Descendant
B. Sibling
C. Adjacent sibling (+)
D. Child

Q10: What is the output of nav a?

A. Only first <a>
B. All <a> inside <nav>
C. All nav tags
D. Unrelated anchors
← Previous Next →
Login
Go Back Top