A :validválasztó lehetővé teszi olyan elemek kiválasztását , amelyek az typeattribútuma alapján érvényes tartalmat tartalmaznak . :validA CSS Selectors 3. szintű specifikációja „érvényességi álválasztó” -ként van meghatározva, vagyis interaktív elemek stílusához használják a felhasználói input értékelése alapján.
Ennek a választónak egy meghatározott célja van: visszajelzést ad a felhasználónak, miközben az oldalon lévő űrlappal interakcióba lép. Az alábbi példa CSS-t használ az „E-mail” mezők pirosra vagy zöldre váltására, reagálva arra, hogy a tartalom megfelel-e érvényes e-mail mintának:
Lásd a Pen: valid &: érvénytelen bemeneteket Chris Coyier (@chriscoyier) a CodePen-en
Vegye figyelembe, hogy az első („E-mail”) zöld-érvényes, még akkor is, ha a mezőben nincs tartalom. Ez azért van, mert a bemenet nem kötelező, így üresen hagyva érvényes űrlapbeküldést eredményez. A viselkedés kijavításához a második rendelkezik egy „kötelező” attribútummal, ami azt jelenti, hogy egy üres mező érvénytelen űrlap beküldést eredményez.
Látványosság
:valid„láncolható” más álszelektorokkal::focuscsak akkor érvényesíteni, amikor a felhasználó gépel,:beforevagy:afterikonokat vagy szöveget generálni, hogy több felhasználói visszajelzést adjanak, vagy az attribútumválasztókinput(value="")csak a tartalmat tartalmazó beviteli mezőket érvényesíteni.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:valida CSS Selectors 3. moduljában vezették be, ami azt jelenti, hogy a böngészők régi verziói nem támogatják. A modern böngészőtámogatás azonban egyre jobb. Ha régebbi böngészőtámogatásra van szüksége, vagy töltse ki a polifillet, vagy használja ezeket a választókat nem kritikus módon, ezért ajánlott a progresszív fejlesztés.