How to find pseudo element (e.g. video::-webkit-media) with JavaScript

Asked Jul 01 '16 at 14:52

Active Jul 01 '16 at 14:54

Viewed 26 times

I'm trying to use javascript (no jquery) to find an element so I add an event listener to the click event. I can alter the CSS with no trouble:

document.styleSheets[0].insertRule('video::-webkit-media-controls-start-playback-button { display: block !important; }', 1)

How would I use document.getElementsByTagName() or similar functions to fetch this dom element?

edited Jul 01 '16 at 14:54

isherwood

asked Jul 01 '16 at 14:52

bigpotato

You can't, pseudo elements are not part of the DOM. – dfsq Jul 01 '16 at 14:55
Pseudo-elements aren't actual DOM nodes, and can't be targeted with JS. – isherwood Jul 01 '16 at 14:55
Is that considered a pseudo element? It is the play button that appears on iOS when viewing a video – bigpotato Jul 01 '16 at 14:56
It's pseudo-class, doesn't matter. You can't. – dfsq Jul 01 '16 at 14:57
got it thanks guys – bigpotato Jul 01 '16 at 14:57
Related: http://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element – isherwood Jul 01 '16 at 14:57
In any case you don't really need it. Just query element by classes, tags, ids, attributes, etc. – dfsq Jul 01 '16 at 14:57

0 Answers0