The CSS Podcast - 015: Pseudo-classes
Say you've got an email sign up form,
and you want the email form field to have a red border if it contains an invalid email address.
How do you do that?
You can use an :invalid
CSS pseudo-class,
which is one of many browser-provided pseudo-classes.
A pseudo-class lets you apply styles based on state changes and external factors. This means that your design can react to user input such as an invalid email address. These are covered in the selectors module, and this module will take you through them in more detail.
Unlike pseudo-elements, which you can learn more about in the previous module, pseudo-classes hook onto specific states that an element might be in, rather than generally style parts of that element.
Interactive states
The following pseudo-classes apply due to an interaction a user has with your page.
:hover
If a user has a pointing device like a mouse or trackpad,
and they place it over an element,
you can hook on to that state with
:hover
to apply styles.
This is a useful way to hint that an element can be interacted with.
:active
This state is triggered when an element is actively being interacted with— such as a click—before click is released. If a pointing device like a mouse is used, this state is when the click starts and hasn't yet been released.
:focus
, :focus-within
, and :focus-visible
If an element can receive focus—like a <button>
—
you can react to that state with the
:focus
pseudo-class.
You can also react if a child element of your element receives focus with
:focus-within
.
Focusable elements, like buttons, will show a focus ring when they are in focus—even when clicked. In this sort of situation, a developer will apply the following CSS:
button:focus {
outline: none;
}
This CSS removes the default browser focus ring when an element receives focus,
which presents an accessibility issue for users who navigate a web page with a keyboard.
If there is no focus style,
they won't be able to keep track of where focus currently is when using the tab key.
With :focus-visible
you can present a focus style when an element receives focus via the keyboard,
while also using the outline: none
rule to prevent it when a pointer device interacts with it.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
The :target
pseudo-class selects an element that has an id
matching a URL fragment.
Say you have the following HTML:
<article id="content">
…
</article>
You can attach styles to that element when the url contains #content
.
#content:target {
background: yellow;
}
This is useful for highlighting areas that might have been specifically linked to, such as the main content on a website, via a skip link.
Historic states
:link
The :link
pseudo-class can be applied to any <a>
element that has a href
value that hasn't been visited yet.
:visited
You can style a link that's already been visited by the user using the
:visited
pseudo-class.
This is the opposite state to :link
but you have fewer CSS properties to use for
security reasons.
You can only style color
, background-color
,
border-color
, outline-color
and the color of SVG fill
and stroke
.
Order matters
If you define a :visited
style,
it can be overridden by a link pseudo-class with at least equal specificity.
Because of this,
it's recommended that you use the LVHA rule for styling links with pseudo-classes in a particular order:
:link
, :visited
, :hover
, :active
.
a:link {}
a:visited {}
a:hover {}
a:active {}
Form states
The following pseudo-classes can select form elements, in the various states that these elements might be in during interaction with them.
:disabled
and :enabled
If a form element,
such as a <button>
is disabled by the browser,
you can hook on to that state with the
:disabled
pseudo-class.
The :enabled
pseudo-class is available for the opposite state,
though form elements are also :enabled
by default,
therefore you might not find yourself reaching for this pseudo-class.
:checked
and :indeterminate
The :checked
pseudo-class is available when a supporting form element,
such as a checkbox or radio button is in a checked state.
The :checked
state is a binary(true or false) state,
but checkboxes do have an in-between state when they are neither checked or unchecked.
This is known as the
:indeterminate
state.
An example of this state is when you have a "select all" control that checks all checkboxes in a group. If the user was to then uncheck one of these checkboxes, the root checkbox would no longer represent "all" being checked, so should be put into an indeterminate state.
The <progress>
element also has an indeterminate state that can be styled.
A common use case is to give it a striped appearance to indicate it's unknown how much more is needed.
:placeholder-shown
If a form field has a placeholder
attribute and no value,
the :placeholder-shown
pseudo-class can be used to attach styles to that state.
As soon as there is content in the field,
whether it has a placeholder
or not,
this state will no longer apply.
Validation states
You can respond to HTML form validation with pseudo-classes such as
:valid
,
:invalid
and
:in-range
.
The :valid
and :invalid
pseudo-classes are useful for contexts
such as an email field that has a pattern
that needs to be matched,
for it to be a valid field.
This valid value state can be shown to the user,
helping them understand they can safely move to the next field.
The :in-range
pseudo-class is available if an input has a min
and max
,
such as a numeric input and the value is within those bounds.
With HTML forms,
you can determine that a field is required with the required
attribute.
The :required
pseudo-class will be available for required fields.
Fields that are not required can be selected with the
:optional
pseudo-class.
Selecting elements by their index, order and occurrence
There is a group of pseudo-classes that select items based on where they are in the document.
:first-child
and :last-child
If you want to find the first or last item,
you can use
:first-child
and
:last-child
.
These pseudo-classes will return either the first or last element in a group of sibling elements.
:only-child
You can also select elements that have no siblings,
with the
:only-child
pseudo-class.
:first-of-type
and :last-of-type
You can select the
:first-of-type
and
:last-of-type
which at first,
look like they do the same thing as :first-child
and :last-child
, but consider this HTML:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
And this CSS:
.my-parent div:first-child {
color: red;
}
No elements would be colored red because the first child is a paragraph and not a div.
The :first-of-type
pseudo-class is useful in this context.
.my-parent div:first-of-type {
color: red;
}
Even though the first <div>
is the second child,
it is still the first of type inside the .my-parent
element,
so with this rule, it will be colored red.
:nth-child
and :nth-of-type
You're not limited to first and last children and types either.
The :nth-child
and
:nth-of-type
pseudo-classes allow you to specify an element that is at a certain index.
The indexing in CSS selectors starts at 1.
You can pass more than an index into these pseudo-classes too.
If you wanted to select all even elements, you can use :nth-child(even)
.
You can also create more complex selectors that find items at regularly spaced intervals, using the An+B microsyntax.
li:nth-child(3n+3) {
background: yellow;
}
This selector selects every third item,
starting at item 3.
The n
in this expression is the index,
which starts at zero the 3 (3n
) is how much you multiply that index by.
Let's say you have 7 <li>
items.
The first item that is selected is 3 because 3n+3
translates to (3 * 0) + 3
.
The next iteration would pick item 6 because n
has now incremented to 1
,
so (3 * 1) + 3)
.
This expression works for both :nth-child
and :nth-of-type
.
You can play around with this sort of selector on this nth-child tester or this quantity selector tool.
:only-of-type
Lastly, you can find the only element of a certain type in a group of siblings with
:only-of-type
.
This is useful if you want to select lists with only one item,
or if you want to find the only bold element in a paragraph.
Finding empty elements
It can sometimes be useful to identify completely empty elements, and there is a pseudo-class for that too.
:empty
If an element has no children, the
:empty
pseudo-class applies to them.
Children aren't just HTML elements or text nodes though: they can also be whitespace,
which can be confusing when you're debugging the following HTML and wondering why it isn't working with :empty
:
<div>
</div>
The reason is that there's some whitespace between the opening and closing <div>
,
so empty won't work.
The :empty
pseudo-class can be useful if you have little control over the HTML and want to hide empty elements,
such as a WYSIWYG content editor.
Here, an editor has added a stray, empty paragraph.
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
With :empty
, you can find that and hide it.
.post :empty {
display: none;
}
Finding and excluding multiple elements
Some pseudo-classes help you to write more compact CSS.
:is()
If you want to find all of the h2
, li
and img
child elements in a .post
element,
you might think to write a selector list like this:
.post h2,
.post li,
.post img {
…
}
With the :is()
pseudo-class, you can write a more compact version:
.post :is(h2, li, img) {
…
}
The :is
pseudo-class is not only more compact than a selector list but it is also more forgiving.
In most cases,
if there's an error or unsupported selector in a selector list,
the entire selector list will no longer work.
If there's an error in the passed selectors in an :is
pseudo-class,
it will ignore the invalid selector, but use those which are valid.
:not()
You can also exclude items with the
:not()
pseudo-class.
For example, you can use it to style all links that don't have a class
attribute.
a:not([class]) {
color: blue;
}
A :not
pseudo-class can also help you to improve accessibility.
For example, an <img>
must have an alt
, even if it's an empty value,
so you could write a CSS rule that adds a thick red outline to invalid images:
img:not([alt]) {
outline: 10px red;
}
Check your understanding
Test your knowledge of pseudo classes
Pseudo-classes act as if a class has been dynamically applied to an element, while pseudo-elements act on an element itself.
Which of the following are a functional pseudo-class?
:is()
:not()
:empty
:target
Which of the following pseudo-classes are due to a user-interaction?
:press
:focus-within
:target
:hover
:squeeze
Which of the following are <form>
state pseudo classes?
:checked
:loading
:fresh
:in-range
:enabled
:valid
:indeterminate