How to select a pseudo of this for CSSRulePlugin.getRule

[zizther]

I have multiple buttons with the same class on a page. I have a mouseover event on the buttons and I want to update the :before pseudo on the current button.

 

How would I pass in the current button so that not all buttons would update if i were to use the CSS class attached to all buttons?
Is it possible to use `this` at all or would I have to apply a unique class to each button or something?

[ZachSaucier]

Hello zizther and welcome to the forums!

 

53 minutes ago, zizther said:

How would I pass in the current button so that not all buttons would update if i were to use the CSS class attached to all buttons?

The only way to do this would be to edit or create a new CSS rule that applies to that specific button since you're affecting a pseudo-element. 

 

53 minutes ago, zizther said:

Is it possible to use `this` at all

No, this is in JavaScript. It doesn't (and can't) exist in CSS. 

 

53 minutes ago, zizther said:

would I have to apply a unique class to each button or something?

Yes, you would have to do something along these lines. For example you could apply a unique class or ID to each button and then affect that specific style rule (using GSAP's CSSRulePlugin would make it slightly easier). If you use a CSS pre-processor like SCSS you could make generating the style rules for individual buttons easier. 

 

The easiest solution would be to replace the psuedo-elements with real elements instead  Then you can access them in JS and this isn't an issue.

[zizther]

Thanks @ZachSaucier
At the moment I have an element within the button which is being controlled via the JS, i was just wondering if i could clean that up by using the pseudo and controlling it via GSAP.
Seems like it will be easier to keep it the way I have it now.

Thanks