:invalidValijat võimaldab valida elemente, mis ei sisalda kehtivat sisu, mis määratakse kindlaks tema typeatribuut. :invalidon CSS-selektorite 3. taseme spetsifikatsioonis määratletud kui „kehtivuse pseudovalija”, mis tähendab, et seda kasutatakse interaktiivsete elementide kujundamiseks kasutaja sisendi hindamise põhjal.
Sellel valikul on üks konkreetne kasutusala: kasutajale tagasiside andmine, kui ta lehel oleva vormiga suhtleb. Allolevas näites kasutatakse CSS-i, et muuta väljad „Email” punaseks või roheliseks, vastates sellele, kas sisu vastab kehtivale e-posti aadressi mustrile:
Pange tähele, kuidas esimene („E-post”) on roheline-isegi siis, kui väljal pole sisu. Seda seetõttu, et sisend on valikuline, nii et selle tühjaks jätmine tooks kaasa kehtiva vormi esitamise. Selle käitumise parandamiseks on teisel atribuut „kohustuslik”, mis tähendab, et tühja väljaga kaasneks vale vormi esitamine.
Huvipunktid
:invalidsaab „aheldada” teiste pseudovalijatega: meeldib:focuskinnitada ainult siis, kui kasutaja kirjutab,:beforevõi:afterluua ikoone või teksti, et anda rohkem kasutajale tagasisidet, või atribuutide valijaidinput(value="")kinnitada ainult sisuga sisendväljadele.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10,0+ | 5.0+ | 4.0+ | 10,0+ | 10+ | Ei | Ei |
:invalidvõeti kasutusele CSS Selektorite moodulis 3, mis tähendab, et brauserite vanad versioonid seda ei toeta. Kuid kaasaegne brauseritugi muutub paremaks. Kui vajate vanemat brauserituge, kas polüfillige või kasutage neid valijaid mitte-kriitilistel viisidel, soovitame seda järk-järgult täiustada.