• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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>.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top