Selecting Children

Sometimes you don’t want all the descendants, only the children. That’s what the > sign is for:

footer > p {
	color: purple;
}

The selector footer > p selects the p elements that are children of a footer, that is, directly inside it. See the difference in our footer: footer a selects both links, because they are descendants of the footer. footer > a selects nothing, because the links aren’t directly in the footer, but in the paragraphs.

The main element on our page contains four div elements: the one with the main heading, the two groups and the breeds. Only the first one is its child, though; the other three are inside section. So main div selects all four, while main > div selects only the one with the main heading. Of course, we could also select it by its class, title-background, but let’s try > to see the difference.