Is there a way to target a pseudo-element in CSS by its class?

Question

I am looking to construct CSS to target this element...

<input type="button" 
       pseudo="-webkit-media-controls-play-button" 
       aria-label="play" 
       class="pause">

... by both its pseudo audio::-webkit-media-controls-play-button and its class .pause. When I combine the two with...

audio::-webkit-media-controls-play-button.pause { 
  background-image: url(funkypattern.png); 
}

... the styling doesn't appear to be applied to the element at all when inspected.

From what I read elsewhere, it's possible this is because the Pseudo must always come last, but in that case I wouldn't know how to list the Class first while still applying both to the same element, as the conventional method I'm aware of has no divider and thus would read the Class as .pauseaudio and the rest as some kind of odd erroneous pseudo-selector.

Does anyone know of a way to make this work?

Note that I will accept the alternate answer of a way to target the Pseudo and Aria-Label instead if it is provided, but either way the solution cannot rely on JavaScript of any sort.
If that was a possibility in this case, I could have just solved this by making my own audio container.

I'm rather confused as to what you are trying to achieve. Are you wanting to style the input element or an audio element with its associated ::-webkit-media-controls-play-button [in some browsers]? — A Haworth
– A Haworth, Commented Nov 17 at 18:55
It's possible that there is some confusion around a pseudo element's class. Pseudo elements don't as such have a class, but if you are trying to target an audio element which has class pause then this would target the play button: audio.pause::-webkit-media-controls-play-button - it selects the audio element which has class pause and then its pseudo element. I still don't understand why you are involving an input element here though! — A Haworth
– A Haworth, Commented Nov 17 at 20:24
The Audio element doesn't have the class, so the nonexistent class can't be targeted. I certainly wish it did, it would make this infinitely easier. I am targeting the input element because the input is actually a Play Button that I'm trying to reskin, and the pause class that applies to it is only there when paused. That means by having one rule targeting the pseudo and another targeting both the pseudo and class I can theoretically swap the background image between being a Pause and Play button depending on the player's state. — Corona MacGuinness
– Corona MacGuinness, Commented Nov 18 at 3:25

Lokesh thakur · Accepted Answer · 2025-11-17 05:00:20Z

-1

No – you cannot target a browser-native pseudo-element using a class selector. The pseudo-element is not part of the DOM, so it cannot have or inherit your .pause class. Therefore, this selector will never match. ::-webkit-media-controls-play-button is not real HTML, it is a shadow-DOM element injected inside the built-in audio element.

answered Nov 17 at 5:00

Lokesh thakur

3244 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A Haworth Nov 17 at 20:26

I can't understand your explanation. The selector: audio.pause::-webkit-media-controls-play-button will select the audio element which has class pause and then its play button pseudo element.

Corona MacGuinness Nov 18 at 3:28

The audio element doesn't have the class, the pseudo element does, but only when the audio is paused. This would allow for two separate rules for the Play and Pause states.

A Haworth Nov 18 at 8:58

How has the pseudo element got a class?

Charles Wang · Accepted Answer · 2025-11-17 02:37:22Z

-3

Ok, so first of all, pseudo is strictly CSS I believe. However, you can still target it using

input.pause[pseudo="-webkit-media-controls-play-button"] { background: url("funkypattern.png"); }

answered Nov 17 at 2:37

Charles Wang

13 bronze badges

New contributor

Collectives™ on Stack Overflow

Is there a way to target a pseudo-element in CSS by its class?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related