Code Responsible

Skip navigation

Pseudo-classes you should be using today

A pseudo-class is used to define a unique CSS style to a state of an element. There are commonly used pseudo-classes used in every project. Typical pseudo-classes you tend to see are hover, focus, and active. Along with these pseudo-classes there are a lot of powerful ones that are typically forgotten about or aren’t commonly well known.

:lang

The :lang pseudo-class has been around since CSS2 and it’s used to select elements with a lang attribute with the specified value. The lang attribute value, specified in the HTML element, is most often a two-letter language code, like lang=”fr” (for French), or two language codes combined, like lang=”fr-ca” (for Canadian French).

  • 4.0 +
  • 8.0 +
  • 2.0 +
  • 3.1 +
  • 9.6 +

Example

p:lang(fr){
  color: red;
}

p:lang(fr-ca){
  color: blue;
}

:last-of-type

The :last-of-type is used to target every element that is the last child, of a particular type, of its parent.

  • 4.0 +
  • 9.0 +
  • 3.5 +
  • 3.2 +
  • 9.6 +

Example

p:last-of-type{
  color: red;
}

:default

The :default pseudo-class sets a default style to a group of similar elements.

  • 10.0 +
  • Unsupported
  • 2.0 +
  • 5.0 +
  • 10.0 +

Example

p:default{
  color: black;
}

:read-only

The :read-only class targets input and textarea elements that have been seen to “readonly”. Currently, most browsers only support the :read-only selector to apply to input and textarea elements.

  • All
  • Unsupported
  • -moz-
  • All
  • All

Example

input:-moz-read-only { /* For Firefox */
  border: 1px solid #CCCCCC;
}

input:read-only {
  border: 1px solid #CCCCCC;
}

:read-write

The :read-only class targets form elements which are “readable” and “writeable”.

  • All
  • Unsupported
  • -moz-
  • All
  • All

Example

input:-moz-read-write { /* For Firefox */
  border: 1px solid #CCCCCC;
}

input:read-write {
  border: 1px solid #CCCCCC;
}

:required

The :required pseudo-class is used to add styles to form elements that have the required attribute. The :required class only applies to the form elements: input, select and textarea.

  • 10.0 +
  • 10.0 +
  • 4.0 +
  • 5.0 +
  • 10.0 +

Example

input:required {
  border: 1px solid red;
}

:optional

The :optional pseudo-class is used to add styles to form elements that have the optional attribute. The :optional class only applies to the form elements: input, select and textarea.

  • 10.0 +
  • 10.0 +
  • 4.0 +
  • 5.0 +
  • 10.0 +

Example

input:optional {
  border: 1px solid #CCCCCC;
}

:valid

The :valid class is used to style form elements with a value that’s indicated by the element’s settings as valid.

  • 10.0 +
  • 10.0 +
  • 4.0 +
  • 5.0 +
  • 10.0 +

Example

input:valid {
  border: 1px solid green;
}

:invalid

The :invalid class is used to style form elements with a value that’s indicated by the element’s settings as invalid.

  • 10.0 +
  • 10.0 +
  • 4.0 +
  • 5.0 +
  • 10.0 +

Example

input:invalid {
  border: 1px solid red;
}

:in-range

The :in-range class selects all elements with a value that is within a specified range.In-range will only work with elements that have range limitations, like input elements with a min and max attribute.

  • 10.0 +
  • Unsupported
  • 28.0 +
  • 5.2 +
  • 11.0 +

Example

input:in-range {
  border: 1px solid green;
}

:out-of-range

The :out-of-range class selects all elements with a value that is outside of a specified range. Out-of-range will only work with elements that have range limitations, like input elements with a min and max attribute.

  • 10.0 +
  • Unsupported
  • 28.0 +
  • 5.2 +
  • 11.0 +

Example

input:out-of-range {
  border: 1px solid red;
}

41 Posts

Ryan Burgess

Ryan Burgess is a Manager, UI Engineering at Netflix in San Francisco, California. Previously at Evernote. Listen to Ryan on the Front End Happy Hour podcast. He's also the creator of SensesLost.com, an online-based arts and culture magazine that focuses on graffiti and tattoo art.

2 Responses to “Pseudo-classes you should be using today”

Leave a Reply

Comment Form