Override !important In WordPress Parent Theme

Question

Override !important In WordPress Parent Theme

3k Views Asked by user2661092 At 21 October 2024 at 05:03

I have the following CSS code in a custom.css style sheet which is part of the Main theme

.thm-unit-test h3 {
    font-size: 28px !important;
}

I have added the following code to my child theme CSS

.thm-unit-test h3 {
    font-size: 18px !important;
    color: #222;
    font-weight: 700;
}

But it is not not working. With this in mind how do I override the !important in the main custom.css. Because if I can override it than the code in my child theme can take effect

Original Q&A

There are 2 best solutions below

MartinBA On 13 November 2018 at 14:39

It should work, make sure that the call for the css of the main theme is above your custom css in the HTML

<head>
    <link rel="stylesheet" type="text/css" href="themeCss.css">
    <link rel="stylesheet" type="text/css" href="yourCustomCss.css">
</head>

Let me know if that help you!

**Adam** · Accepted Answer

Use the Body tag in front of it... be more specific:

body .thm-unit-test h3 {
    font-size: 28px !important;
}

Or other parent elements...

Take some time to understand CSS Selector Priority:

Understanding CSS selector priority / specificity

A selector's specificity is calculated as follows:

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules.

These rules have no selectors, so a=1, b=0, c=0, and d=0.) count the number of ID attributes in the selector (= b) count the number of other attributes and pseudo-classes in the selector (= c) count the number of element names and pseudo-elements in the selector (= d) The specificity is based only on the form of the selector.

the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD. Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD. Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the > specificity.

https://www.w3.org/TR/CSS2/cascade.html#cascading-order

I'd use an ID in front of it tbf.

Override !important In WordPress Parent Theme

There are 2 best solutions below

Related Questions in CSS

Related Questions in WORDPRESS

Related Questions in CHILD-THEMING

Trending Questions

Popular # Hahtags

Popular Questions