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; }

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; }

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; }

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 div tags. The first is empty, the next has text, and the final one has one space in it. Here is the HTML:

<div></div>
<div>Not Empty</div>
<div> </div>

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

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

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; }

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 div tag.

Here is an example with an e-mail input:

<input type="email" value="[email protected]" />
<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; }

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; }

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; }

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; }