:invalidSelektor omogućuje odabir elemenata koji ne sadrže valjano sadržaje, kao što je određeno po typeatribut. :invaliddefiniran je u specifikaciji CSS Selectors Level 3 kao "pseudo-selektor valjanosti", što znači da se koristi za oblikovanje interaktivnih elemenata na temelju procjene korisničkog unosa.
Ovaj birač ima jednu posebnu uporabu: pružanje povratnih informacija korisniku tijekom interakcije s obrascem na stranici. Primjer u nastavku koristi CSS za pretvaranje polja "E-pošta" u crveno ili zeleno, odgovarajući na to odgovara li sadržaj važećem uzorku adrese e-pošte:
Imajte na umu kako je prva ("E-pošta") zeleno valjana - čak i kada u polju nema sadržaja. To je zato što je unos neobavezan, pa bi ostavljanje praznog rezultiralo valjanim podnošenjem obrasca. Da bi popravio ovo ponašanje, drugo ima atribut "potreban", što znači da bi prazno polje rezultiralo nevaljanim podnošenjem obrasca.
Točke interesa
:invalidmože biti "u lancu" s drugim pseudo-selektorima: voljeti:focusprovjeriti valjanost samo kada korisnik piše:beforeili:aftergenerirati ikone ili tekst kako bi pružili više povratnih informacija od korisnika ili selektori atributa voleinput(value="")provjeriti samo polja za unos koja sadrže sadržaj.
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10,0+ | 5.0+ | 4.0+ | 10,0+ | 10+ | Ne | Ne |
:invaliduveden je u CSS Selectors Module 3, što znači da ga stare verzije preglednika ne podržavaju. Međutim, moderna podrška za preglednike je sve bolja. Ako vam je potrebna starija podrška za preglednik, ili polifil, ili koristite ove birače na nekritične načine, progresivno poboljšanje, što se preporučuje.