CSS Pseudo-classes: Element states

— 7 minute read

So far, we have already had a look at links and form pseudo-classes. In this article, we'll dive into element states.

Element states reflect on a specific condition an element could have. This can, for instance, be first-of-type or the last-child.

I've split this up into a series of four, where this is the third part about form pseudo-states.

The other parts:

Element state selectors

Element state selectors are pseudo-classes I've used a lot in my articles. They are a great way to select a particular matching element and apply specific styling.

We get the following options:

  • :first-child
  • :last-child
  • :only-child
  • :first-of-type
  • :last-of-type
  • :nth-child
  • :nth-of-type
  • :only-of-type
  • :empty

:first-child, :last-child, & :only-child

These are great if you want to apply specific styling to the first or last elements.

They are often used to offset margin on a list, for instance.

Let's try out something simple and change the colors of the first and last elements.

li:first-child {
  color: hotPink;
}
li:last-child {
  color: teal;
}

And for the only-child, we can use the following selector.

li:only-child {
  color: crimson;
}

Be careful when using these as they fire in order. If you have all three, the only-=child technically also is valid for the first & last-child selector!

You can see what happens in this CodePen.

See the Pen `:required` & `:optional` by Chris Bongers (@rebelchris) on CodePen.

:first-of-type & :last-of-type

These are very close to the above, but with one distinct difference.

For instance, first-child needs the element to be the first element in the selector. As first-of-type it styles the first occurrence of that element.

The easiest way to showcase this is by having an HTML structure where we want the first strong element to be thicker than the rest.

<div>
  <p>Line one</p>
  <strong>Important line</strong>
  <p>Line two</p>
  <strong>Slightly less important line</strong>
  <p>Line three</p>
</div>
div > strong:first-child {
  color: hotPink;
}
div > strong:first-of-type {
  color: purple;
  font-size: 1.5rem;
}

You'll be able to see the first strong being purple and not pink because that won't fire!

Note: You can even try and remove the first-of-type line.

And the same can be done with last-of-type.

div > strong:last-child {
  color: gold;
}
div > strong:last-of-type {
  color: crimson;
}

You can see what happens in the CodePen below.

See the Pen `:first-child`, `:last-child`, & `:only-child` by Chris Bongers (@rebelchris) on CodePen.

nth-child & nth-of-type

These two are fantastic, and I use these quite often. If even dedicated a complete article on CSS nth-child selectors.

They can be used the select the xth item.

For instance you can to style the second item:

li:nth-child(2) {
  background: gold;
}

The cool part with this selector is that it doesn't just have one static value. You can use values like:

  • odd/even: Select odd or even numbers
  • 2n+2: Select every 2nd item

Note: CSS-tricks has this cool nth-tester tool

Let's try them out:

li:nth-child(2) {
  color: hotPink;
}
li:nth-child(odd) {
  color: hotPink;
}
li:nth-child(2n + 2) {
  color: hotPink;
}

And again, we can use the nth-of-type selector to target types instead of actual first items. This can be super useful for images, for instance, if you want them left/right based on their occurrence.

See the Pen `nth-child` & `nth-of-type` by Chris Bongers (@rebelchris) on CodePen.

only-of-type

This is quite a funny one. It fires if the selector is only one of a type.

Where the only-child can only have one child, this one can say if an element only has 1 of this child.

strong:only-of-type {
  color: hotPink;
}

Which will result in the following:

See the Pen `nth-child` & `nth-of-type` by Chris Bongers (@rebelchris) on CodePen.

:empty

The last one is the empty selector. It can be used to indicate empty elements.

Some people even use this as a way to find misplaced elements.

You can also use this when using WYSIWYG editors that add empty p tags.

:empty {
  display: none;
}

See the Pen `only-of-type` by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter