Question 362833 in CSS Question posted in
Some basic documentation can be found here.

Css – Can't overwrite !important tag (tried several tips already)

I’m having trouble overwriting an !important tag for background-color and color. Here’s what I’m given:

Chrome Inspect screenshot

The native greens already seem to be overwriten but I need a different color. If I add my custom CSS the ways I read in this forum, it’s not getting the high enough specificity, apparently. Could someone correct me, please?

.ccb-wrapper-148669 .calc-buttons .calc-btn-action {
    background: #8c76af !important;
    color: #000 !important;
}

I tried changing specificity and using a Javascript snippet but obviously, a wrong way…

Tags:

2

Answers


  1. 0

    From the screenshot you’ve shared, it seems the selectors you’re using might not be targeting the right element to change the existing styles.

    Login or Signup to reply.
  2. 0

    To increase the specificity of your CSS selector and override the existing styles, you can try adding additional parent selectors or class names to target the desired elements.

    body .ccb-wrapper-148669 .calc-buttons .calc-btn-action {
    background: #8c76af !important;
    color: #000 !important;
}

    In this example, body is added as a parent selector to increase specificity. If that doesn’t work, you can try adding more parent selectors or class names based on the structure of the html.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search