Class overwriting styles it shouldn’t?
Hey, I’m trying to style a button with two classes with the
[class|=“”] selector, if I add with-icon and 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 that with-icon doesn’t have, such as 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 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.9 Replies
[attr|=value]
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
[class|="with-icon"] doesn't match button with-icon at allyup, has to be the first value
it's the equivalent to
[class="with-icon"], [class^="with-icon-"]Ohh so I can only have one class for it to work essentially?
basically
I was going for simplification for exception classes. Instead of
class=‘button button—important' you could just put button—important since the default styling of button would be given as it’s a substring of it. I guess maybe the extra class doesn’t matter, it just looks cluttered to me hahathat works, by the way
Yeah definitely, I like the method, but it only works until it has another class of the same functionality like in the example applied to the element too unfortunately, or another class in general.
Have you got any suggestions to achieve that same functionality in this case? I feel I might just have to settle for nesting for it tbh
yes: nested selectors with sass
Alright cool. I’ll look into it, thanks
And thank you too jochem