How to override CSS file taking values from parent?

I am making changes to a CSS file but they are not going through because the parent theme may be overriding the child. (The code was made by someone else); If I want the child css values to be taken into consideration without having to go through pages of code, what do I use?

You can use the “Inspect” tools in your browser to examine various elements to see where they are getting their styling from and which styles are applied but getting overridden.
It may well be a specificity issue, possibly if the creator of the parent theme used overly heavy selectors, for example if they used ID selectors, or !important a lot in their CSS.

I am using the Inspect tool, it tells me exactly what div to place to change the particular styling, but if I change anything, nothing is altered. For example I am trying to change the border color of a button, Inspect shows me its under a particular div, I place that in css, write border-color… and no changes are showing up. Even if I place !important in my code.

Does inspect show you which piece of css and selector is setting the style that is displayed which you are trying to override?
It may help to post some code here, or a link to the site and describe the affected elements.

the site is the button color is not changing, and I have tried placing all the divs, even the responsive ones and changing the border color, but its not working.

Where are you putting your styles? Are they embedded or in a separate file? If they are in a separate file, does your stylesheet get loaded after the main stylesheets, or before?

It see the button border being set to a dark red by this rule:-

.gwd-div-193u {
	border-color: #91192c !important;

In the file gwdpage_style.css

There are other rules setting it to black and red which seem to relate to keyframes and say “inline”, but I’m not sure where those are coming from, it could be javascript.

Which is the rule you are trying to add?

Yes that is the color I added as the border, but for my browsers (chrome + safari) only the text changes to dark red, whereas the border remains the original bright red it was.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.