A combinator describes the relationship between two selectors.
| Combinator | Syntax | Matches |
|---|---|---|
| Descendant | div p |
every <p> anywhere inside a <div> |
| Child | div > p |
every <p> that is a direct child of a <div> |
| Adjacent sibling | h2 + p |
the <p> immediately after an <h2> |
| General sibling | h2 ~ p |
every <p> after an <h2>, same parent |
CSS
/* Every link inside the nav, however deeply nested */
nav a {
text-decoration: none;
}
/* Only direct <li> children of this <ul>, not nested lists */
ul.menu > li {
border-bottom: 1px solid #e5e7eb;
}
/* The paragraph right after a heading gets a bit of extra space */
h2 + p {
margin-top: 4px;
}The descendant combinator (just a space) is the one you'll reach for most
often; > is handy when a component contains nested lists/menus and you
only want to style the top level.