|  Interactive Media Design

Pseudo Classes

CSS Pseudo-classes target element by their state than their tag name or attributes. As such they are quite useful for providing feedback to user's actions. There are many different standard and experimental pseudo-classes, but there are ones that get used more often than others.

An <a> can have different states: the two most basic are :link and :visited. The :link pseudo-class refers to any <a> tag with an href attribute that had not been visited by the user. Whereas the :visited pseudo-class refers to any <a> that has already been visited by the user.

/* selects any <a> with an href attribute */
a:link {
  color: cadetblue;
}

/* selects any <a> that has been visited */
a:visited {
  color: indianred;
}

The :link and :visited pseudo-classes are often associated with the :hover and :active pseudo-classes, which we will talk about in the next section. Because these styles have equal specificity, they can be easily overridden by another. So it is important to follow the LVHA-order (:link, :visited, :hover, :active)

The mouse can trigger many states of an element, as such there are many different pseudo-classes that can be used. Two of the most common are :hover and :active. The :hover pseudo-class matches an element when the user interacts with it using pointing device, typically by moving the mouse cursor over the element. The :active pseudo-class targets an element that is being activated by user, which typically occurs when the use is pressing down on the primary mouse button.

a:hover {
  background-color: goldenrod;
  color: white;
}

a:active {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

While generally associated with <a> and <button> elements, the :hover and :active pseudo-classes can be applied to most elements.

The position an element appears among its siblings can also be targeted. Pseudo-classes in the group can be extremely useful when targeting certain elements within a large group.

The :first-child and :last-child will target the first element and the last element, respectively, of a group of sibling elements if it matches the prefix selector.

/* matches the first <p> tag */
p:first-child {
  font-weight: bold;
}

/* matches the last <p> tag */
p:last-child {
  font-style: italic;
}

The nth-child matches elements based on their position in a group of siblings. This pseudo-class will take a single argument that describes the pattern for matching the element. The values can be a number, a keyword (odd, even) or a functional notation.

/* selects the second <li> element */
li:nth-child(2) {
  background-color: indianred;
  color: white;
}

/* selects alternating rows of a table */
tr:nth-child(odd) {
  background-color: #f7f7f7;
}

/* selects every 4th box starting with the first one */
.box:nth-child(4n + 1) {
  background-color: cadetblue;
}

A form, and specifically the inputs of a form, may have several different states. The following pseudo-classes can be used to target the different states of form inputs.

  • The :focus pseudo-class represents an element that has received focus, which is generally triggered by the clicking on or tabbing to the element.
  • The :required pseudo-class represents any <input>, <select>, or <textarea> that has the required attribute. NOTE: The required attribute is used to force the user to provide a value for that specific form element before the form will be submitted.
  • The :optional pseudo-class represents any <input>, <select>, or <textarea> that does not have the required attribute.
  • The :valid pseudo-class represents any <input> or form element whose value validates successfully.
  • The :invalid pseudo-class represents any <input> or form element whose value fails to validate.
  • The :read-only pseudo-class represents any <input> or <textarea> that is not editable by the user.

←