More pseudo-classes

In the previous chapter you learned the pseudo classes to style something on hover. In this chapter you will learn some more. We start with refreshing the syntax:

selector:pseudo-class {
property: value;

:nth-child()

With this pseudo class you can style the nth child of a parent element, or any child element whose numeric position in the series of children matches the pattern an+b. The formula an+b is placed inside the parentheses, e.g.: nth-child(1n+0) would match every child element.

The values a and b must both be integers, and the index of an element's first child is 1. A common use case is to match every other row in a table.

In a list with list elements, the following code would affect every odd numbered list element:

HTML

<ul>
    <li>li:nth-child(2n+1)</li>
    <li>li:nth-child(odd)</li>
    <li>li:nth-child(2n)</li>
    <li>li:nth-child(even)</li>
    <li>li:nth-child(0n+1)</li>
    <li>li:nth-child(1)</li>
    <li>li:nth-child(-n+3)</li>
</ul>

CSS

li:nth-child(2n+1){
    color: blue;
}

• tr:nth-child(2n+1)

  Represents the odd rows of an HTML table.

• r:nth-child(odd)

  Represents the odd rows of an HTML table.

• tr:nth-child(2n)

  Represents the even rows of an HTML table.

• tr:nth-child(even)

  Represents the even rows of an HTML table.

• span:nth-child(0n+1)

  Represents a span element which is the first child of its parent; this is the same as the :first-child selector.

• span:nth-child(1)

  Equivalent to the above.

• span:nth-child(-n+3)

  Matches if the element is one of the first three children of its parent and also a span.

:last-child

The :last-child pseudo class represents any element that is the last child element of its parent.

li:last-child {
    color: blue;
}

:required

The :required pseudo class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted.

input:required {
    property: value;
}

:focus

The :focus pseudo class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

input:focus {
    property: value;
}

:checked

The :checked pseudo class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo class no longer applies to this element, but will to the relevant one.

/* any "checkable" element */
:checked {
    color: green;
}

/* only radio elements */
input[type="radio"]:checked {
    color: green;
}

/* only checkbox elements */
input[type="checkbox"]:checked {
    color: green;
}

/* only option elements */
option:checked {
    color: green;
}

:disabled and :enabled

The :enabled pseudo class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can't be activated or accept focus.

input:enabled {
    color: #green;
}

The :disabled pseudo class represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

input[type="text"]:disabled { background: #ccc; }

:valid and :invalid

The :valid pseudo class represents any <input> or <form> element whose content validates correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

The :invalid pseudo class represents any <input> or <form> element whose content fails to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors.

HTML

<form>
    <label>Enter a URL:</label>
    <input type="url" />
</form>

CSS

input:invalid {
    background-color: #ffdddd;
}

input:valid {
    background-color: #ddffdd;
}

:lang()

The :lang pseudo class matches elements based on the language the element is determined to be in. In HTML, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as HTTP headers).

HTML

<div lang="en"><q>This English quote has a <q>nested</q> quote.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote.</q></div>

CSS

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }