14 replies

Class overwriting styles it shouldn’t?

Hey, I’m trying to style a button with two classes with the

[class|=“”]

[class|=“”]

selector, if I add

with-icon

with-icon

and

button

button

at the same time it overwrites all of the styles for the button class. This would totally make sense if both classes had the same properties in which case the cascade would handle which values are used, but it overwrites things in

button

button

that

with-icon

with-icon

doesn’t have, such as

background-color

background-color

. I want it to overwrite the display property only in this case, which I thought it would do.

It doesn’t do this when I use regular class selectors e.g

.button

.button

so it must be selector related, but this selector says ‘if the element has a class with that value or one that starts with that value”, this doesn’t sound like they should clash in any other way than expected?

https://codepen.io/deerCabin/pen/EaYyaqr

I’d appreciate any insight. Am i missing something? Thanks in advance.

CodePenR

style overriding

...

KP-C

Kevin Powell - Community•16mo ago•

14 replies

snxxwyy

Class overwriting styles it shouldn’t?

Hey, I’m trying to style a button with two classes with the

[class|=“”]

[class|=“”]

selector, if I add

with-icon

with-icon

and

button

button

button

button

that

with-icon

with-icon

doesn’t have, such as

background-color

background-color

. I want it to overwrite the display property only in this case, which I thought it would do.

It doesn’t do this when I use regular class selectors e.g

.button

.button

CodePenR

style overriding

...

Class overwriting styles it shouldn’t?

Similar Threads

Class overwriting styles it shouldn’t?

Similar Threads

Similar Threads

Similar Threads