DEV Community

Cover image for CSS Pseudo-classes: Element states
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

CSS Pseudo-classes: Element states

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;
}
Enter fullscreen mode Exit fullscreen mode

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

li:only-child {
  color: crimson;
}
Enter fullscreen mode Exit fullscreen mode

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.

: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>
Enter fullscreen mode Exit fullscreen mode
div > strong:first-child {
  color: hotPink;
}
div > strong:first-of-type {
  color: purple;
  font-size: 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

You can see what happens in the CodePen below.

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

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;
}
Enter fullscreen mode Exit fullscreen mode

Which will result in the following:

: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;
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

Collapse
lexlohr profile image
Alex Lohr

Using :nth-last(-of-type), you can select a certain amount of tags, which is probably one of the coolest tricks you can do with CSS selectors.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Indeed, very cool trick, also like the :has selector these days ๐Ÿคฏ