The::spelling-errorand::grammar-errorpseudo-classesarealsodefinedby
thePseudo-ElementsModule.Whenimplemented,thesepseudo-classeswillletus
styletextthatismisspelledorungrammaticalaccordingtothebrowser’sdictionary.Pseudo-classes
Asmentionedearlierinthischapter,pseudo-classeshelpusdefinestylesfordocu-
mentsbasedoninformationthatisunabletobegleanedfromthedocumenttreeor
can’tbetargetedusingsimpleselectors.Theseincludelogicalandlinguisticpseudo-
classessuchas:not()and:lang().Italsoincludesuser-triggeredpseudo-classes
suchas:hoverand:focus.Inthissection,we’llcoversomeesotericandlesser-knownpseudo-classeswitha
focusonwhatisavailableinbrowsers:child-indexedandtypedchild-indexed
pseudo-classes,andinputpseudo-classes.Child-indexedandtypedchild-indexed
pseudo-classesletusselectelementsbytheirpositioninthedocumentsubtree.
Inputpseudo-classestargetformfieldsbasedontheirinputvaluesandstates.Highlighting Page Fragments with :target
AfragmentidentifieristhepartofaURLthatfollowsthe#;forexample,#topor
#footnote1.You’veprobablyusedthemtocreatein-pagenavigation:aso-called
“jumplink.”Withthe:targetpseudo-class,wecanhighlighttheportionofthe
documentthatcorrespondstothatfragment,andwecandoitwithoutJavaScript.Say,forexample,thatyouhaveseriesofcommentsoradiscussionboardthread:<section id="comments">
<h2>Comments on this post</h2>
<article class="comment" id="comment-1146937891">...</article>
<article class="comment" id="comment-1146937892">...</article>
<article class="comment" id="comment-1146937893">...</article>
</section>WithsomeCSSandotherfancybits,itlooksalittlelikewhatyouseeinFigure1.25.38 CSS Master