:invalid クラス

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

:invalid

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

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

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

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

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

構文(Syntax)

CSS

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

DOM ( JavaScript )

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

in HTML

in JavaScript

Example

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