2022.2

WhenusedasaCSSselector,theHTMLtagforatableistable.Forarow,itistrandforacell,td.A
stylerulethatusesoneofthese,however,wouldapplytoalltables,rows,orcells.Foraruletobe
morespecificyouneedtoaddanID(forauniqueelement)oraclass(forasetofsimilarelements)to
thetable,roworcell,andusethatasthestylerule'sselector.
Adding an ID or class to a table, row or cell
BeforeyoucanaddanIDorclasstoatable,roworcell,youhavetoselectthattable,roworcell(see
"Selectingatable,roworcell"onpage278).Afterselectingthecell,rowortable,typetheIDorclassin
therespectivefieldontheAttributespane.
InCSS,refertothetable,roworcellwith#ID(whereIDshouldbereplacedwiththeactualID)orwith
.class(whereclassshouldbereplacedwiththeactualclass).
Styling the first, last and nth rows
TheCSSpseudo-classes:first-child,:last-childand:nth-child()areveryusefulforstyl-
ingtablerows.
ACSSpseudo-classfollowsaselectortospecifyaspecialstateofthatselector.Italwaysstartswitha
colon.
Thepseudo-classes:first-child,:last-childand:nth-child()selectanelementonlyifit
isthefirst,lastornthchildelementrespectively.(InHTMLandCSS,thewordchildreferstoanele-
mentinsideanotherelement.)
ThefollowingCSSstyleruleselectsthetablerow(tr)thatcomesfirst(:first-child)initsparent(which
naturallyisatable),andcolorsitsbackgroundred:
tr:first-child {
background: red;
}
Tip: InaDynamicTable,dataareinthebodyofthetable(selector:tbody)andsubtotalsarein
thefooter(selector:tfoot).
Selecting a specific row, odd or even rows, or every nth row
Thepseudo-class:nth-child()letsyouselectaspecificrow,alloddorevenrows,oreverynthrow.
Betweentheroundbracketsin:nth-child()youcanfillinanumber,oddoreven,oraformula:
an+b.Intheformula,arepresentsacyclesize(every...),nisacounter(forthechildelements),andb
isanoffsetvalue('startatb').Thefollowingexampleswillmakethisclear.
:nth-child(3)matchesjustoneelement:thethirdchildelement.
Page 280