:invalidValitsin voit valita elementtejä, jotka eivät sisällä voimassa sisältöä, joka määräytyy sen typemäärite. :invalidon määritelty CSS-valitsimien tason 3 spesifikaatiossa "pätevyysvalitsimeksi", mikä tarkoittaa, että sitä käytetään interaktiivisten elementtien tyyliin käyttäjän syötteen arvioinnin perusteella.
Tällä valitsimella on yksi erityinen käyttötarkoitus: antaa käyttäjälle palautetta, kun hän on vuorovaikutuksessa sivun lomakkeen kanssa. Alla olevassa esimerkissä CSS: llä muutetaan Sähköposti-kentät punaisiksi tai vihreiksi vastaamalla siihen, vastaavatko sisällöt kelvollista sähköpostiosoitemallia vai eivät:
Huomaa, kuinka ensimmäinen ("Sähköposti") on vihreä-voimassa, vaikka kentässä ei ole sisältöä. Tämä johtuu siitä, että syöte on valinnainen, joten tyhjän jättäminen johtaisi kelvolliseen lomakkeen lähetykseen. Tämän ongelman korjaamiseksi toisella on "pakollinen" -attribuutti, mikä tarkoittaa, että tyhjä kenttä johtaisi virheelliseen lomakkeen lähetykseen.
Kiinnostavat paikat
:invalidvoidaan ketjuttaa muiden näennäisselektorien kanssa: haluaa:focusvahvistaa vain, kun käyttäjä kirjoittaa,:beforetai:afterluoda kuvakkeita tai tekstiä, jotta saadaan enemmän palautetta käyttäjältä, tai määritteen valitsimet haluavatinput(value="")validoida vain sisältöä sisältävät syöttökentät.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | Ei | Ei |
:invalidesiteltiin CSS Selectors -moduulissa 3, mikä tarkoittaa, että selainten vanhat versiot eivät tue sitä. Nykyaikainen selaintuki on kuitenkin parantumassa. Jos tarvitset vanhempaa selaintukea, joko polyfill-täyttö tai käytä näitä valitsimia ei-kriittisillä tavoilla á la progressive enhancement, mikä on suositeltavaa.