:valid クラス

　:valid クラスは、入力内容の検証が真である場合に設定されたスタイルを反映する擬似クラスです。
　主に入力内容の真偽が検証できるエレメントが対象です。 <input type="date">、<input type="email"> などといった入力内容が限定されているような <FORM> 部品です。

　関係する <label> も、"+label"セレクターでスタイルを設定することができます。

　何も入力しなくても真になります。入力が必要な場合は、required属性を設定します。

:valid クラス

input:valid{
	outline: 2px green solid;
}

input:valid + label{
	background-color: #01DF0177;
}

詳しくは Example を参照してください

　対になる疑似クラスに:invalidクラスがあります。 :invalidクラスは入力内容が異なる場合にスタイルを反映します。

　その他に、入力内容の値が範囲内でスタイルを反映する:in-rangeクラス、範囲外でスタイルを反映する:out-of-rangeクラスがあります。

構文(Syntax)

CSS

HTMLElement:valid {
	style_propaty: value;
	...
}

DOM ( JavaScript )

　疑似クラスはDOM ( JavaScript )から操作できません。
　スタイルのみの操作は擬似クラスを利用したほうが簡易です。

in HTML

in JavaScript

Example

　:validの例です。:invalidクラスも使ってあるために入力値が異なるとlabelにアラートが出ます。
　入力が必要な場合は、required属性を設定します。

:valid クラス

ページ内 Index

構文(Syntax)

CSS

DOM ( JavaScript )

in HTML

in JavaScript

Example

関連疑似クラス

関連（Related）