CSS псевдокласс :validcss3

CSS селекторы

Значение и применение

Псевдокласс :valid выбирает все элементы в которых значение указано корректно (соответствует типу входных данных). Для того, чтобы выбрать некорректные элементы (не соответствуют типу входных данных), необходимо использовать псевдокласс :invalid

Поддержка браузерами

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
:validcss310.04.010.05.010.012.0

CSS синтаксис:

:valid {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Использования псевдоклассов :valid и :invalid на примере ввода пользователем своего адреса электронной почты (проверка по наличию в написании адреса собаки - @) :

<!DOCTYPE html>
<html>
<head>
<title> Псевдокласс :first-of-type</title>
<style type = "text/css"> 
input:invalid {
border: 2px solid red; 
}
input:valid {
border: 2px solid green; 
}
</style>
</head>
<body>
<input type = "email" value = "myemailpochta.ru"><br><br>
<p><strong>Internet Explorer 9 и ниже не поддерживает псевдоклассы :invalid и :valid..</strong></p>
</body>
</html> 
Пример использования псевдоклассов :invalid и :valid.
Пример использования псевдоклассов :invalid и :valid.
CSS селекторы