[Resolved] What are these css selectors applied to?

[tractor-1]

Hi,
What are these WooCommerce CSS selectors on single product applied to?

.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden)::after, 
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden)::before 

Thanks

[David]

Hi there,

they’re used to style the GP + / – quantity buttons.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[tractor-1]

What part of +/- buttons exactly?
–
This is the whole chunk, similar to what Tom posted here:
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden)::after,
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden)::before,

.woocommerce form .quantity.buttons-added .minus,
.woocommerce form .quantity.buttons-added .plus,
.woocommerce form .quantity.buttons-added .qty

Minus, plus and qty are doing their thing fine, it’s the first two selectors that I’ve no clue what they’re applied to.

[David]

They are for the fallback buttons in case the users browser is blocking Javascript.
If enabled the GP Quantity Buttons rely on Javascript to replace the default browser +/- input.
Part of that script adds the button-added class.
However, if the user browser is blocking JS then the button-added class is not added. And then those classes kick in to add the + and – symbols as CSS pseudo elements.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[tractor-1]

Thank you, that helped.

[Author]

Posts