CSS
How Many Types of CSS Combinators Are There?
When writing CSS, selectors are used to target HTML elements for styling. But what if you want to style elements based on their relationship to other elements in the DOM?
That’s where CSS combinators come in.
✅ What Are CSS Combinators?
CSS combinators are special selectors that define the relationship between two elements. They help you apply styles based on how elements are nested or positioned relative to each other.
🧮 So, How Many Types of Combinators Are There?
👉 There are 4 types of CSS combinators:
| Combinator Name | Symbol | Description |
|---|---|---|
| Descendant Combinator | (space) | Targets elements nested inside another |
| Child Combinator | > | Targets direct children only |
| Adjacent Sibling | + | Targets the immediate next sibling |
| General Sibling | ~ | Targets all following siblings |
🔹 1. Descendant Combinator ()
div p {
color: red;
}
- Targets all
<p>tags inside a<div>, no matter how deeply nested.
🔹 2. Child Combinator (>)
ul > li {
color: green;
}
- Targets only
<li>elements that are direct children of<ul>.
🔹 3. Adjacent Sibling Combinator (+)
h1 + p {
font-style: italic;
}
- Targets the first
<p>that comes right after an<h1>.
🔹 4. General Sibling Combinator (~)
h2 ~ p {
color: gray;
}
- Targets all
<p>siblings that come after an<h2>within the same parent.
🧾 Summary Table
| Type | Symbol | Selects |
|---|---|---|
| Descendant | (space) | All descendants of an element |
| Child | > | Direct child elements |
| Adjacent Sibling | + | Next immediate sibling only |
| General Sibling | ~ | All following siblings (same parent) |
🧠 Conclusion
There are four types of CSS combinators — descendant, child, adjacent sibling, and general sibling. These powerful tools let you create context-aware, structure-based styling without the need for additional classes or IDs.
Pro Tip: Combine combinators with class selectors and pseudo-classes (:hover, :first-child) for even more precision and power in your CSS.