Выбор дочерних элементов

Иногда нужны не все потомки, а только дочерние элементы. Для этого служит знак >:

footer > p {
	color: purple;
}

Селектор footer > p выбирает элементы p, которые являются дочерними для footer, то есть находятся прямо в нём. Посмотрите на разницу на нашем подвале: footer a выбирает обе ссылки, потому что они потомки подвала. footer > a не выбирает ничего, потому что ссылки лежат не прямо в подвале, а в абзацах.

В элементе main на нашей странице четыре элемента div: с главным заголовком, две группы и блок с породами. Но его дочерний элемент только первый; остальные три находятся внутри section. Поэтому main div выбирает все четыре, а main > div — только тот, что с главным заголовком. Конечно, его можно выбрать и по классу title-background, но давайте попробуем >, чтобы увидеть разницу.