# Combinators — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

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

> Select elements by relationship with descendant, child, adjacent and general sibling combinators.

## 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
- [ ] A ~ B
- [ ] A + B
- [x] A > B

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