Search code examples
csswordpresschild-theming

Override !important In WordPress Parent Theme

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

Solution

  • 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.