:invalidSelector vă permite să selectați elemente care nu conțin conținut valid, așa cum este determinat de ei typeatribut. :invalideste definit în specificațiile de nivel 3 CSS Selectors ca un „pseudoselector de validitate”, ceea ce înseamnă că este folosit pentru a stiliza elemente interactive bazate pe o evaluare a intrării utilizatorului.
Acest selector are o anumită utilizare: furnizarea unui feedback utilizatorului în timp ce interacționează cu un formular de pe pagină. Exemplul de mai jos folosește CSS pentru a transforma câmpurile „E-mail” în roșu sau verde, răspunzând dacă conținutul se potrivește sau nu cu un model valid de adresă de e-mail:
Rețineți că primul („E-mail”) este verde-valid, chiar și atunci când nu există conținut în câmp. Acest lucru se datorează faptului că introducerea este opțională, deci lăsarea necompletată ar duce la trimiterea unui formular valid. Pentru a remedia acest comportament, al doilea are un atribut „obligatoriu”, ceea ce înseamnă că un câmp necompletat ar duce la trimiterea unui formular nevalid.
Puncte de interes
:invalidpoate fi „înlănțuit” cu alți pseudo-selectori: cum ar fi:focussă valideze numai atunci când utilizatorul tastează:beforesau:aftersă genereze pictograme sau text pentru a oferi mai multe feedback-uri utilizatorului sau selectorii de atribute cainput(value="")să valideze doar câmpurile de intrare care conțin conținut.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | Peste 10 ani | nu | nu |
:invalida fost introdus în CSS Selectors Module 3, ceea ce înseamnă că versiunile vechi ale browserelor nu o acceptă. Cu toate acestea, suportul modern pentru browser se îmbunătățește. Dacă aveți nevoie de suport pentru browser mai vechi, fie polyfill, fie folosiți acești selectori în moduri non-critice, la îmbunătățirea progresivă, ceea ce este recomandat.