Archived topic
Index styles taking priority
5 replies · Started by Jordan on March 31, 2021
Hey!
Not sure if I'm doing something wrong when it comes to utilizing custom styles in a child theme. I still like having that control over certain elements, but I feel like I'm having to use !important way too much.
The site below is where I'm currently looking, specifically at the button I've put in an header element. I tagged it with .button to get the shape and spacing, but then added my own styling for .button--green which you can see does not take priority over the default styling. Is there a way to have the child styles take priority in instances like this?
https://staging.phillipsfractor.com/
Thanks!
Hi there,
I've checked the sequence of CSS on your site and it seems to be in proper order.
Your CSS is most likely losing in precedence because of selector specificity.
https://css-tricks.com/precedence-css-order-css-matters/
https://css-tricks.com/specifics-on-css-specificity/
instead of using .button--green, try being more specific.
Example:
div.page-hero .inside-page-hero .home--hero-content a.button--green {
background-color: #4CBB17;
color: white;
}Interesting. So if I wanted to make a repeatable class to use in multiple locations, then I’d need to add that specificity each time? Or just use !important I suppose?
Interesting. So if I wanted to make a repeatable class to use in multiple locations, then I’d need to add that specificity each time? Or just use !important I suppose?
In some cases, you'll need to add specificity. In your case, we needed to add specificity because there were 2 competing CSS that fits the element. There was .page-hero a and a.button which were more specific than your .button--green. First one, .page-hero a, was more specific because of the parent element being indicated. 2nd one, a.button, wins too because it specified the tag(<a>).
https://share.getcloudapp.com/kpuKy1Ag
!important is the easy way out but it's not good practice as it disrupts the natural flow of precedence. It's a pain to debug.
Understood! Thanks for the input.
No problem. :)
