class precedence css h1

Question

can you explain why h1.smaller-20 does not take precedence over .hm-share h1 ? And how can I make all the h1.smaller-20 the same size on my website ?

<hm-logo-bar left-cb="ctrl.skip()" left-name="'Passer'"></hm-logo-bar>
<ion-content  scroll="false" class="hm-share">
  <div ng-if="ctrl.step == 1">
    <div class="hm-container">
      <h1>{{'share.0' | translate}}</h1>
      <h1>{{'share.1' | translate}}</h1>
      <h1 class="smaller-20">{{'share.2' | translate}}</h3>
    </div>
    ...

try to use `!important` to prevent override : `font-size:1.42857rem!important` — לבני מלכה, Oct 07 '18 at 10:35
They have the same precedence (one tag name, one class) so whichever appears later in the CSS file wins. — Niet the Dark Absol, Oct 07 '18 at 10:36
@לבנימלכה: while the use of `!important` can be useful to ensure that the selector is correct it should *not* be used outside of that - minor - diagnostic function. Instead use the cascade properly. — David Thomas, Oct 07 '18 at 10:37
ok thanks everyone, so the best practices are to use !important ? — Louis, Oct 07 '18 at 10:37
the worst practise is !important ... the best practise is to understand how CSS work and you will be able to re-order you style and add/remove some classes to have what you want — Temani Afif, Oct 07 '18 at 10:39
I agree with Temani Afif to your question if is `!important` best pracites.... here is learn:https://css-tricks.com/when-using-important-is-the-right-choice/ — לבני מלכה, Oct 07 '18 at 10:40
ok thanks. So it I want to put general css at the begining of my css file, in order to style all smaller h1s, what is the best practices please ? — Louis, Oct 07 '18 at 10:47
Best practice is to put your own specific styles last. If you can't do that for whatever reason, make sure the specificity of your desired behaviour is higher. You can write, for instance, `body h1.className` to override `h1.className`. — Mr Lister, Oct 07 '18 at 12:18

class precedence css h1

0 Answers0