How can you define your own pseudo class in JavaScript?

I would like to be able to define my own pseudo class in JavaScript, without using any attributes, or css ‘hacks’ and compromises. The pseudo class must not be an event like :hover, but more like ::first-child that is static, and not an event.
The closest I could come to that was:

html:

<red ::second-child>ygu</red>

CSS:

[::second-child] {
    color: red;
}

But, that is obviously only an attribute, and I would like it to be done in JavaScript without needing to apply the ::second-child as an attribute, and as a proper pseudo class in css. For example: red::second-child {}

My aim is to apply css with ::second-child, but I would like the JavaScript to be able to be applied in the same way to make other pseudo classes like ::third-child as well.


Source: css

Leave a Reply