Style product option buttons individually

I want to be able to style Product Option Button Groups separately to one another. Currently any changes to the class of ANY button will mirror to ALL buttons under the Product Option List.

for example I would like to be able to style them like this:

I feel like this might be a work around but I would rather not have to do this:

See products template page.

Read only link:


this creates this effect:

The desired effect is only the ‘red’ option to be red and none of the sizes.
Is there a way to select an nth child within an nth child?

e.g. select 2nd ‘product-button’ child within the 1st ‘button-group’ child of the ‘product-option’ parent.

Does that make sense? haha
I’ll have a play myself and see I can figure out.


So for some reason this works here:

but not here:

and I can’t figure out why…?

@steplabs YES!!

I realise now its the whole product option that is cloned which is why my method wasn’t working. DUHH!

Thanks a lot