4 min read
•Question 18 of 49easyWhat are CSS Selector Combinators?
Understanding descendant, child, sibling combinators.
What You'll Learn
- Combinator types
- When to use each
- Performance considerations
Combinator Types
| Combinator | Syntax | Selects |
|---|---|---|
| Descendant | A B | Any B inside A |
| Child | A > B | Direct children only |
| Adjacent | A + B | Immediately after A |
| General | A ~ B | Any sibling after A |
Examples
styles.cssCSS
/* Descendant - any nested */
nav a { color: blue; }
/* Child - direct only */
ul > li { list-style: none; }
/* Adjacent sibling - immediately after */
h1 + p { font-size: 1.2em; }
/* General sibling - any after */
h1 ~ p { margin-left: 20px; }Real Examples
styles.cssCSS
/* Style paragraphs after headings */
h2 + p { font-weight: bold; }
/* Direct list items only */
.menu > li { display: inline-block; }
/* All siblings after checked */
input:checked ~ label { color: green; }