CSS Master

Figure 1.27. Using the :target selector to create tabs sans JavaScript

Improving Accessibility

AmoreaccessibleversionmightalsouseJavaScripttotogglethehiddenoraria-

hidden=trueattributesbasedonthevisibilityofeachtabbody.

ClickingatabupdatestheURLwiththenewdocumentfragmentidentifier.This

inturn,triggersthe:targetstate.

Negating Selectors with :not()

Perhapsthemostpowerfulofthisnewcropofpseudo-classesis:not().Itreturns

allelementsexceptforthosethatmatchtheselectorargument.Forexample,

p:not(.message)selectseverypelementthatlacksamessageclass.

The:not()pseudo-classiswhat’sknownasafunctionalpseudo–class.Itaccepts

asingleargument,muchlikefunctionsinotherprogramminglanguagesdo.Any

argumentpassedto:not()mustbeasimpleselectorsuchasanelementtype,a

classname,anID,oranotherpseudo-class.Pseudo-elementswillfail,aswillcom-

poundselectorssuchaslabel.checkboxorcomplexselectorssuchasp img.

Here’sanexampleofaformthatusestextualinputtypesandradiobuttons:

42 CSS Master