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 theselectors module,and this module will take you through them in more detail.

Unlike pseudo-elements,which you can learn more about in theprevious module,pseudo-classes hook onto specificstates 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 thetab key.With:focus-visibleyou can present a focus style when an element receives focus using the keyboard,while also using theoutline: none rule to prevent it when a pointer device interacts with it.

button:focus{outline:none;}button:focus-visible{outline:1pxsolidblack;}

:target

The:targetpseudo-class selects an element that has anid matching a URL fragment.Say you have the following HTML:

<article>    <!-- ... --></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, using a skip link.

Historic states

:link

The:linkpseudo-class can be applied to any<a> element that has ahref value thathasn'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 forsecurity reasons.You can only stylecolor,background-color,border-color,outline-color and the color of SVGfill andstroke.

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{}

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:enabledpseudo-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:checkedpseudo-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 clear 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 aplaceholder attribute andno value,the:placeholder-shownpseudo-class can be used to attach styles to that state.As soon as there is content in the field,whether it has aplaceholder 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 contextssuch as an email field that has apattern 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 amin andmax,such as a numeric inputand the value is within those bounds.

With HTML forms,you can determine that a field is required with therequired attribute.The:requiredpseudo-class will be available for required fields.Fields that are not required can be selected with the:optional pseudo-class.

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>    <p>A paragraph</p>    <div>A div</div>    <div>Another div</div></div>

And this CSS:

.my-parentdiv: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-parentdiv: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.

The:nth-last-child() and:nth-last-of-type() pseudo-classes count from the end, rather than the beginning.

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,usingthe An+B microsyntax.

li:nth-child(3n+3){background:yellow;}

This selector selects every third item,starting at item 3.Then in this expression is the index,which starts at zero the 3 (3n) is how much you multiply that index by.

Say you have 7<li> items.The first item that is selected is 3 because3n+3 translates to(3 * 0) + 3.The next iteration would pick item 6 becausen has now incremented to1,so(3 * 1) + 3).This expression works for both:nth-child() and:nth-of-type().

:nth-child() and:nth-last-child() also support an "of S" syntax that lets you filter the matches with a selector, similar to:nth-of-type().li:nth-of-type(even) is equivalent to:nth-child(even of li). While:nth-of-type() only lets you filter based on element type (likeli orp), the "of S" syntax lets you filter on any selector.

If you have a table, you may want to add stripes to every other row. While you can target every other row withtr:nth-child(even), this doesn't work if you are filtering some rows out. If you implement filtering by applying thehidden attribute, you can addof :not([hidden]) to the selector to pre-filter the hidden items out before selecting the even rows.

tr:nth-child(evenof:not([hidden])){background:lightgrey;}

You can play around with this sort of selector on thisnth-child tester or thisquantity 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> <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 theh2,li andimg child elements in a.post element,you might think to write a selector list like this:

.posth2,.postli,.postimg{…}

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 aclass attribute.

a:not([class]){color:blue;}

A:not pseudo-class can also help you to improve accessibility.For example, an<img> must have analt, 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:10pxred;}

:has()

What if you want to style elements based on what is contained inside of them? You can use the:has() pseudo-class to do that. For example, you might want to apply styles to buttons that include icons.

button:has(svg){/* ... */}

In its most basic configuration, like in the previous example, you can think of:has() as a parent selector. You can also use the matching parent selector combined with other selectors to target other elements.

form:has(input:valid)label{font-weight:bold;}form:has(input:valid)label::after{content:"✅";}

In this example we are applying styles to the label element and thelabel::after pseudo-element when the form input has avalid pseudo-class.

The:has() pseudo-class cannot be nested inside of another:has(), but it can be combined with other pseudo-classes.

:is(h1,h2,h3):has(a){/* ... */}

The selector list is unforgiving, so if any selectors in the list are invalid, all style rules will be ignored.

.my-element:has(img,::before){/* any styles here will be discarded since pseudo elements can't be included in the :has() selector list */}

Check your understanding

Test your knowledge of pseudo classes