# Combinators — CSS

Source: https://www.geekswithgeeks.com/en/css/css-combinators

> Combine selectors to target elements by relationship.

## Four combinators

`A B` any descendant, `A > B` direct child only, `A + B` immediate next sibling, `A ~ B` any later sibling.

## Combinators in CSS

Notice how the spacing between selectors changes the meaning.

```css
nav a { color: blue; }        /* any <a> inside <nav> */
ul > li { margin: 4px; }      /* direct <li> children only */
h2 + p { margin-top: 0; }     /* <p> right after an <h2> */
h2 ~ p { color: gray; }       /* every <p> after an <h2> */
```

**Quiz:** Which combinator selects only direct children?

- [ ] A B
- [x] A > B
- [ ] A ~ B

*Answer:* A > B. `>` restricts the match to immediate children, not all descendants.