Changing the style of CSS pseudo-classes using JavaScript

In this post, we’ll see how to dynamically set the CSS style of a pseudo-class using JavaScript.

As a demonstration, try hovering over the square below.

Its color will randomly change, which was done by changing the color property of the :hover pseudo-class of the element.

We’ll see two ways of changing the style. The first one can be used when we want to apply a static CSS ruleset to a pseudo-class. With the second method, we’ll take the modifications one step further and dynamically set the value of one or more properties of the pseudo-class’ style.

Why pseudo-classes?

We give special attention to CSS pseudo-classes because there’s no JavaScript function that can be used to specifically target them. We can select elements with getElementById or classes with getElementsByClassName but, once we have selected those elements, we cannot target the pseudo-class directly.

For this reason, we require some workarounds to change the pseudo-classes style. We’ll see two different methods of doing it:

1. Using CSS rule with attribute selectors for the pseudo-class.
2. Using CSS variables in the pseudo-class ruleset.

Method 1: Apply a pseudo-class CSS ruleset using attribute selectors

For the first method, we need to know the new CSS rules we want to set for the pseudo-class in advance. For example, let’s change the color property of a :hover pseudo-class by pressing a button.

This method involves two main steps:

1. Creating a CSS ruleset with the style we want for the pseudo-class using attribute selectors.
2. Setting the attribute used on step 1 for the element we want to change using JavaScript.

The CSS part would look as follows:

#myItem[attrName]:hover {
  /* CSS declarations to apply */
}

myItem is the ID of the element we want to modify. attrName is an attribute, we can give it any name, we’ll modify with JavaScript on the second step. Initially, we create our element without this attribute. Since the attribute is initially not present on the element, the CSS ruleset above will not be applied.

Then, triggered by an event, we use JavaScript to add this attribute on myElement:

document.getElementById("myElement").setAttribute("attrName", "1");

This will add attrName to the attributes of myElement and set it to one (the value is not important, only its presence). Now, the CSS rule that we defined above will be applied.

Similarly, we can use JavaScript to stop applying the CSS style as follows:

document.getElementById("myElement").removeAttribute("attrName");

Since attrName has been removed from myElement attributes, the CSS rule will no longer be applied on this element.

Working example here.

Method 2: Using CSS variables

CSS variables can be used to dynamically set the value of a property using JavaScript. It works for pseudo-classes, too. This is the method that was used for the demonstration at the beginning of this post.

It involves two steps:

1. Setting CSS declarations using CSS variables.
2. Changing the value of the CSS variable using JavaScript.

We can use CSS variables as follows:

:root {
  --color: yellow; 
}

#myElement:hover {
  background-color: var(--color);
}

The first CSS rule is like defining a variable, --color, and making it global (by defining it at :root). After doing this, we can use this variable for any CSS property using var(--color).

JavaScript can be used to change the value of --color as follows:

document.getElementById("myElement").style.setProperty("--color", "blue"); 

This allows for more flexibility than the first method since we can change the CSS variable to any value.

A working example can be found here.

Credit for the first method goes to Stack Overflow user Sergio Abreu who posted it here.

For a more detailed explanation of CSS variables, you can check here.