:invalidСелектор вам омогућава да одаберете елементе који не садрже важећи садржај, као што је одређено његовим typeатрибутом. :invalidје дефинисан у спецификацији ЦСС Селецторс Левел 3 као „псеудо селектор ваљаности“, што значи да се користи за обликовање интерактивних елемената на основу процене корисничког уноса.
Овај бирач има једну посебну употребу: пружање повратних информација кориснику док је у интеракцији са обрасцем на страници. Пример у наставку користи ЦСС за претварање поља „Е-пошта“ у црвено или зелено, одговарајући на то да ли се садржај подудара са важећим обрасцем адресе е-поште:
Обратите пажњу на то да је прва („Е-пошта“) зелено важећа, чак и када у пољу нема садржаја. То је зато што је унос необавезан, па би остављање празног резултирало ваљаним подношењем обрасца. Да би поправио ово понашање, друго има атрибут „рекуиред“, што значи да би празно поље резултирало неважећим подношењем обрасца.
Тачке од интереса
:invalidмогу бити „уланчани“ са другим псеудо-селекторима: воле:focusда потврде само када корисник пише:beforeили:afterда генеришу иконе или текст како би пружили више повратних информација од корисника, или селектори атрибута волеinput(value="")да потврде само поља за унос која садрже садржај.
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | Јок | Јок |
:invalidје представљен у ЦСС Селецторс Модуле 3, што значи да га старе верзије прегледача не подржавају. Међутим, савремена подршка за прегледаче је све боља. Ако вам је потребна старија подршка за прегледач, или полифил, или користите ове бираче на некритичне начине, уз прогресивно побољшање, што се препоручује.