CSS class precedence and why I did I have to use the !important override?

Question

This is just a basic sample:

 <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Untitled 1</title>
    <style type="text/css">
    .rowDate {
     background-color: #28456c;
     color: #fff;
    }
    .floatRight {
     color: gray;
     padding-top: 1mm;
     padding-bottom: 1mm;
     padding-right: 2mm;
     float: right;
     text-align: right;
     font-size: 8pt;
     font-weight: 700;
     text-transform: none;
    }
    .textWhite {
     color: #fff;
    }
    </style>
    </head>
    
    <body>
    
    <table>
     <tr class="rowDate">
      <td>
      <div class="floatRight textWhite">
       This is some text</div>
      </td>
     </tr>
    </table>
    
    </body>
    
    </html>

Result in Microsoft Expression Web:

In this sample it is doing what I want but the basic principles are there. I expected the text colour from textWhite to take precedence. This is stated here where it says:

the last one takes precedence. Check out the links below it looks like you can use an ! important rule to override the normal behaviour.

Yet, when I was using my fuller HTML / CSS code (which is displayed in a CHtmlView it was ignoring the .textWhite styling. When I viewed it in a browser it was like this:

The only way I got it to work was by using !important:

Why did I have to do this? I can't show the complete HTMl / CSS as it is quite lengthy and has real names in it. But if I must prepare a full sample I will.

Update

So this is the snippet from my live CSS file:

.textWhite {
    color: #fff !important;
}
.containerMeeting {
    margin-bottom: 3mm;
}
.cellBibleReading {
    padding-left: 3mm;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
    border-right-style: none;
}
.cellNotes {
    font-size: 10pt;
    font-style: italic;
}
.cellTime {
    padding-left: 3mm;
    padding-right: 5mm;
    font-size: 9pt;
    font-weight: 700;
    color: gray;
}
.cellTheme {
    border-right-style: none;
}
.cellPosition {
    color: gray;
    padding-right: 2mm;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    vertical-align: middle;
    text-transform: none;
    border-left-style: none;
}
.cellName {
    font-size: 10pt;
    font-weight: normal;
}
.floatRight {
    color: gray;
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 2mm;
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    text-transform: none;
}

I can see that I have defined .textWhite before .floatRight. So you are saying in the comments that it is the order I define the classes that is imprtant rather than the order I declare them in the class attribute?

you can clearly see that the floatRight is after (line 100) than textwhite (line 59). Don't relay on order, increase the specificity instead — Temani Afif, Apr 12 '20 at 15:02
With `!important` order will be ignored. On the other hand two `!important` property order will be followed. — Rahul, Apr 12 '20 at 15:45
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more infos — Saadi Toumi Fouad, Apr 12 '20 at 15:48

score 1 · Accepted Answer · edited Apr 12 '20 at 15:47

1

If you change the order of css definitions for floatRight and textWhite ( write css style for textWhite at after of floatRight), you don't need to describe !important on textWhite style.

floatRight and textWhite are common styles, so it will be good to remove color style on floatRight selector.

.floatRight {
    color: gray;
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 2mm;
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    text-transform: none;
}
.textWhite {
    color: #fff;
}

edited Apr 12 '20 at 15:47

Andrew Truckle

17,769
16
66
164

answered Apr 12 '20 at 15:42

I don't want to remove `color: gray;` out of `floatRight` because it will break my whole design up and I would have to create a new `.textGray` class and update all my XSL transformation script. – Andrew Truckle Apr 12 '20 at 15:49
I have changed the order of the class definitions and removed the `!important` override. All good! – Andrew Truckle Apr 12 '20 at 15:49

CSS class precedence and why I did I have to use the !important override?

Update

1 Answers1