CSS Master

Thatlastitemhasadegreeofcomplexity.We'llcomebacktoitinamoment.

What’sthedifferencebetween:nth-child()and:nth-last-child()?Thestarting
point::nth-child()countsforwardsand:nth-last-child()countsbackwards.
CSSindexesusecountingnumbersandstartwithoneratherthanzero.

Both:nth-child()and:nth-last-child()areusefulforalternatingpatterns.
Creatingzebra-stripedtablerowcolorsistheperfectusecase.TheCSSthatfollows
giveseven-numberedtablerowsalightbluish-graybackground,theresultofwhich
canbeseeninFigure1.31:

css/chapter1/selectors-nth-child.css (excerpt)

tr:nth-child(even) {

background: rgba(96, 125, 139, 0.1);

}

Figure 1.31. Using :nth-child(even) to style table rows

Switching:nth-childto:nth-last-childinvertsthisbanding,sincethecounting
beginsfromthebottom,showninFigure1.32.

Selectors 49