:validVolič umožňuje vybrať prvky, ktoré obsahujú platný obsah, ako je stanovené jeho typeatribútom. :validje definovaný v špecifikácii CSS Selectors úrovne 3 ako „pseudo-selektor platnosti“, čo znamená, že sa používa na štýl interaktívnych prvkov na základe vyhodnotenia vstupu používateľa.
Tento selektor má jedno konkrétne použitie: poskytnúť používateľovi spätnú väzbu pri interakcii s formulárom na stránke. V nasledujúcom príklade pomocou CSS sú polia „E-mail“ červené alebo zelené, aby odpovedali na to, či sa obsah zhoduje s platným vzorom e-mailovej adresy:
Prečítajte si pero: platné a neplatné vstupy od Chrisa Coyiera (@chriscoyier) na stránke CodePen
Všimnite si, ako je prvý („e-mail“) platný zelene, aj keď v poli nie je žiadny obsah. Je to preto, že vstup je voliteľný, takže jeho ponechanie nevyplnené by malo za následok platné odoslanie formulára. Ak chcete opraviť toto správanie, druhá má atribút „required“, čo znamená, že prázdne pole by malo za následok neplatné odoslanie formulára.
Body záujmu
:validmôžu byť „pripútané“ k iným pseudo-selektorom: radi:focusoverujú iba pri písaní používateľom,:beforealebo:aftergenerujú ikony alebo text, aby poskytli viac spätnej väzby od používateľov, alebo selektory atribútov radiinput(value="")overujú iba vstupné polia s obsahom.
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10,0+ | 5,0+ | 4,0+ | 10,0+ | 10+ | 5+ | 2+ |
:validbol predstavený v CSS Selectors Module 3, čo znamená, že staré verzie prehľadávačov ho nepodporujú. Podpora moderných prehľadávačov sa však zlepšuje. Ak požadujete staršiu podporu prehliadača, buď vyplňte, alebo použite tieto selektory nekritickými spôsobmi á la progresívne vylepšenie, ktoré sa odporúča.