CSS Master

(Primo) #1
</ul>
</body>
</html>

YoucanseewhatthislookslikeinFigure1.29.


Figure 1.29. Using :first-child by itself matches more elements than we want

Because:first-childisunqualified,boththeh2elementandfirstlielementare
hotpink.Afterall,h2isthefirstchildofbody,andliisthefirstchildoftheul
element.Butwhyaretheremaininglielementsgreen?Well,that’sbecause:last-
childisalsounqualified,andulisthelastchildofbody.We’veessentiallytyped
:first-childand:last-child.


Ifwequalify:first-childand:last-childbyaddingasimpleselector,itall
makesmoresense.Let’slimitourselectiontolistitems.Change:first-childto
li:first-childand:last-childtoli:last-child.Figure1.30showstheresult.


Selectors 47

Free download pdf