1

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

j08691
  • 204,283
  • 31
  • 260
  • 272
user2661092
  • 19
  • 1
  • 6

2 Answers2

4

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.

Community
  • 1
  • 1
Adam
  • 1,294
  • 11
  • 24
1

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!

MartinBA
  • 797
  • 1
  • 5
  • 15
  • This is a WordPress Theme. I am trying to override the css in the main style sheet, with one created in the child theme – user2661092 Nov 13 '18 at 14:46
  • 1
    add your cusom child stylhesheet after the main stylesheet; ie, use the priority value, like: add_action('wp_enqueue_scripts', 'call_child_stylesheet', X ); – Pedro Serpa Nov 13 '18 at 15:32