How to set priorities in Css classes?

Question

I'm having a HTML table. I'm trying to override a cell's css class with what is defined in the row's css class.

Basically the cell has the css class 'background-color : green' and the row has 'background-color : blue'. What i want from this is the bleu background in all the cells, but what i'm having is blue in all the cells except the one that has the green background obviously.

Is there a way to resolve this ? I've found something that involves z-index but i didn't quite understand.

Please add some code to jsfiddle or attached it here so I'll try to help you — Idoshin, Jul 30 '20 at 13:47

score 0 · Answer 1 · answered Jul 30 '20 at 13:53

Set all cells to a class and assign each cell an ID like: <td class='cells' id='cell_num_#'> and so on.

Set the class 'cells' to blue, and then call only for a specific id to change to green. You could then use:

#cell_num_#{
    background-color: blue !important;
}

But i don't think you need it

score 0 · Answer 2 · answered Jul 30 '20 at 13:53

specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class
assign it after the other class
if two classes are in separate files, import the priority file second
!important

!important is the lazy way, but you really should go for #1 to avoid important-ception. Once you've added one !important you can't use it to make some other rule even more important.

Example:

div{
    height: 100px;
    width: 100px;
}

/////////////////////////////
.color{
    background-color: yellow !important;
}

.color{
    background-color: red;
}
/////////////////////////////

<div class='color'></div>

score 0 · Answer 3 · answered Jul 30 '20 at 14:00

I've actually found a simple solution : You just have to define in your css file the result of having both classes. So in my example it is like this :

HTML :

<table>
<tr>
    <th>#</th>
    <th>Columna</th>
    <th>Relative</th>
    <th>Isso</th>
</tr>
<tr class="backgroundBlue">
    <td class="backgroundGreen">1</td>
    <td>This</td>
    <td>Column</td>
    <td>Is</td>
</tr>

CSS:

.backgroundBlue{
    background-color: blue;
}
backgroundGreen{
    background-color: green;
}
.backgroundBlue TD.backgroundGreen{
    background-color: blue;
}

Jessica · Answer 4 · 2022-02-03T09:41:24.240

What you're looking for is called the Order of Specificity, checkout this link for more information: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

It is calculated with the following logic:

Element type adds 1
Class adds 10
Id adds 100
Important overrides all

So for example, div.test #blah will have a specificity score of 111, however #blah will have a score of just 100. In this case, the first rule wins.

If there are two elements with the important property, the order of specificity takes priority.

The CSS rules will be applied in order of specificity score.

How to set priorities in Css classes?

4 Answers4