Combinators
📌 Covered in this chapter:
Descendant · Child · Adjacent Sibling · General Sibling · Combining · Readability · Component-Scoped · Avoid Complex Selectors
Welcome to Chapter 4: Combinators — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1CSS Combinators Overview
Combinators two selectors madhya relationship define chestayi — parent-child, sibling connections based ga styles target cheyadaniki.
| Combinator | Symbol | Meaning |
|---|---|---|
| Descendant | space | Any nested level lo match |
| Child | > | Direct child only |
| Adjacent sibling | + | Immediately next sibling |
| General sibling | ~ | All following siblings |
2Descendant & Child Combinators
CSS — Combinators▶ Try in Editor
/* Descendant — any p inside .card at any depth */
.card p {
color: #555;
}
/* Child — only direct h2 children of .card */
.card > h2 {
margin-bottom: 10px;
font-size: 1.25rem;
}Component-scoped selectors: .card > h2 card component lo matrame heading style apply chestundi — global h2 ni affect cheyadu.
3Sibling Combinators
CSS
/* Adjacent sibling — p immediately after h2 */
h2 + p {
margin-top: 0;
font-size: 1.1rem;
}
/* General sibling — all p siblings after h2 */
h2 ~ p {
color: #64748b;
}4Combining Selectors & Readability
CSS — Combined
nav.main-nav > ul > li.active > a {
color: #3b82f6;
font-weight: 700;
}⚠️ Avoid Overly Complex Selectors
Long chained selectors specificity ekkuva, maintenance kashtam. Instead use a class: .nav-link--active { ... }. Selector readability and reusability always prioritize cheyandi.