CSS Master

Figure 1.3. Oops! Our selector is too broad

The Child Combinator

Incontrasttothedescendantcombinator,thechildcombinator(>)selectsonlythe
immediatechildrenofanelement.ItfollowsthepatternA>B,matchinganyelement
BwhereAistheimmediateancestor.

Ifelementswerepeople,touseananalogy,thechildcombinatorwouldmatchthe
childofthemotherelement.Butthedescendantcombinatorwouldalsomatchher
grandchildren,andgreat-grandchildren.Let’smodifyourpreviousselectortouse
thechildcombinator:

01-selectors/child-combinator.html (excerpt)

form > p {

font-size: 22px;

}

Nowonlythedirectchildrenofarticleareaffected,asshowninFigure1.4.

Selectors 7