Validation

These are pseudo-classes that can be used to target the state of input elements and more.

:checked

This attribute targets the checked radio button or checkbox:

:checked

Description

Any element that can be toggled on or off can use this selector. As of now, these are radio buttons, checkboxes, and options in a selective list.

Here is an example with a checkbox and a label value:

<input type="checkbox" checked value="check-value" name="test" />
<label for="test">Check me out</label>

Here is a CSS rule that will target the label only when the checkbox is checked:

input:checked + label { color: #ff0000; }

:default

This targets the default element from many similar elements:

:default

Description

Use this selector to help define the default element from a group of elements. In a form, this would be the default button or the initially selected option from a select element.

Here is an example using a form:

<form method="post">
  <input type="submit" value="Submit" />
  <input type="reset" value="Reset" />
</form>

Here is the CSS. This will only target the submit input as it is the default:

:default { color: #ff0000; }

:disabled and :enabled

These will target elements based on their enabled state:

:disabled
:enabled

Description

There is a disabled attribute that is available on interactive elements. Using :disabled will target elements where the :disabled attribute is present and :enabled will do the opposite.

Here is some HTML with two inputs out of which one is disabled:

<input type="submit" value="Submit" disabled/>
<input type="reset" value="Reset" />

Here is the CSS. The disabled input will have its text color set as red and the other as green:

input:disabled { color: #ff0000; }
input:enabled { color: #00ff00; }

:empty

This targets elements that have no children:

:empty

Description

This targets nodes without any children. Children can be any other element including text nodes. This means that even one space will count as a child. However, comments will not count as children.

Here is an example with three p tags. The first is empty, the next has text, and the final one has one space in it. Here is the HTML:

<p></p>
<p>Not Empty</p>
<p> </p>

Here is the CSS. Only the first p will have a red background:

p { height: 100px; width: 100px; background-color: #00ff00; }
p:empty { background-color: #ff0000; }

:in-range and :out-of-range

These selectors target elements that have a range limitation:

:in-range
:out-of-range

Description

Some elements now have range limitations that can be applied. When the value is outside of this range, the :out-of-range selector will target it, and when the value is within the range, :in-range will target it.

Here is an example that uses an input that is the number type:

<input type="number" min="1" max="10" value="11" />
<input type="number" min="1" max="10" value="5" />

Here is the CSS. The first input will have red text because it is beyond the maximum range and the second will have green text:

:in-range {color: #00ff00; }
:out-of-range { color: #ff0000; }

:invalid and :valid

The :invalid and :valid attribute targets an element based on the validity of the data:

:invalid
:valid

Description

Certain input elements have data validity, a great example being the e-mail element. The selectors select based on whether the data is valid or not. You should note that some elements are always valid, for example, a text input, and some elements will never be targeted by these selectors, for example, a p tag.

Here is an example with an e-mail input:

<input type="email" value="test@test.com" />
<input type="email" value="not a valid email" />

Here is the CSS. The first input will be green as it is valid and the other will be red:

:valid {color: #00ff00; }
:invalid { color: #ff0000; }

:not or negation

The :not attribute negates a selector:

:not(selector)

Description

The :not parameter must be a simple selector and will target the elements where the :not parameter is not true. This selector does not add to specificity of the rule.

Here is an example using paragraphs:

<p>Targeted Element</p>
<p class="not-me">Non targeted element</p>

Here is the CSS. Only the first paragraph will be targeted:

p:not(.not-me) {color: #ff0000; }

:optional and :required

The :optional and :required attributes target elements that are either optional or required, respectively.

:optional
:required

Description

This is used for any input element that is required or optional.

Here is an example that has two inputs—one that is required and one that is not:

<input type="text" value="Required" required />
<input type="text" value="Optional" />

Here is the CSS. The required input will have red text and the optional input will have green text:

:required { color: #ff0000; }
:optional { color: #00ff00; }

:lang()

The :lang() attribute targets based on the language:

:lang(language)

Description

This selector works differently to the attribute selector; in that, this will target all elements that are in a specific language even if they are not explicitly defined. The attribute selector will only target elements that have a lang attribute.

Here is an example with a span element that does not have a lang attribute, but it is the child of the body which does:

<body lang="en-us">
<span>This is English.</span>
</body>

Here is the CSS. The first rule will match the element, but the second will not match anything:

:lang(en) { color: #ff0000; }
span[lang|=en] { color: #00ff00; }