CSS Combinators

CSS Combinators

CSS combinators define relationships between selectors and allow you to apply styles based on the structural relationship of HTML elements. They make your CSS more efficient by targeting elements without needing extra classes or IDs.

---

Types of CSS Combinators

There are four main types:

1. Descendant Combinator (space)
2. Child Combinator (>)
3. Adjacent Sibling Combinator (+)
4. General Sibling Combinator (~)

---

Example: CSS Combinators

---

Summary of Each Combinator

1. Descendant Combinator ( )

Selects any <p> element nested inside .box, at any depth:

2. Child Combinator (>)

Selects only the immediate children of .box:

3. Adjacent Sibling Combinator (+)

Selects the next sibling immediately after .title:

4. General Sibling Combinator (~)

Selects all siblings that follow .note within the same parent:

---

Key Takeaways

• Combinators allow you to apply styles based on element relationships.
• (descendant): Targets nested elements at any level.
• > (child): Targets only direct children.
• + (adjacent sibling): Targets the next sibling element.
• ~ (general sibling): Targets all following siblings under the same parent.