:validSelektor omogućuje odabir elemenata koji sadrže valjano sadržaje, kao što je određeno po typeatribut. :validdefiniran 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:
Pogledajte olovku: valjani &: nevaljani unosi Chrisa Coyiera (@chriscoyier) na CodePenu
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
:validmož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+ | 5+ | 2+ |
:validuveden 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.