CSS Master

Therearefivesuchpseudo-classeswithnamesthatmirrorthoseoftheiruntyped
counterparts:

■ :first-of-type
■ :last-of-type
■ :only-of-type
■ :nth-of-type()
■ :nth-last-of-type()

Thedifferencebetweentheseandchild-indexedpseudo-classesisasubtleone.
Wherep:nth-child(5)matchesthefifthitemonlyifitisapelement,p:nth-of-
type(5)matchesallpelements,thenfindsthefifthpelementamongthose.

Let’sstartwithaslightlydifferentdocument.Itstillhas 20 items,butsomeofthem
arepelementsandsomeofthemaredivelements.Thepelementshaverounded
corners,ascanbeseeninFigure1.39.

Figure 1.39. A document of 20 items, with p elements indicating rounded corners

Using :first-of-type, :last-of-type, and :only-type

With:first-of-type,wecanselectthefirstelementthatmatchesaselector.How
aboutwegiveourfirstpelementalimegreenbackground:

Selectors 57