CSS Specificity Order - css

Question

I have two css classes in a codebase and I'm unsure why one is being chosen over the other, I thought the specifity of my second one was stronger. Is anyone able to explain?
The CSS class that it's choosing is -
td, th, table { border-collapse: collapse; border: 1px solid #999; }
And the CSS that I want it to use is -
table.cancellation { border: none; }
I thought as the second one had a class selector it would have a stronger specificity, why am I wrong?

Answer 1

You're overwriting the style for the table, but not the cells.
In the first table, everything has a red border.
In the second table, the table has a blue border, but since border-collapse:collapse is set, the red of the td & td appear above it.
In the third table, border-collapse is set to separate and you can see that the table does truly have a blue border.
In the last table, the styles for td and th are also overwritten - giving a borderless table.
th,
td,
table {
border-collapse: collapse;
border: 1px solid red;
margin-bottom:1rem;// just for looks
}
table.table {
border-color: blue
}
table.separate{
border-collapse:separate;
}
table.none,
table.none th,
table.none td{
border:none
}
<table>
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
<table class = "table">
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
<table class = "table separate">
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
<table class = "table none">
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>

Answer 2

CSS reads from top to bottom
if the class
td, th, table { border-collapse: collapse; border: 1px solid #999; }
is written after
table.cancellation { border: none; }
Then it will take the properties of the one that comes at the very last in your code!
If this isn't the case then you can use "border: none !important" as it has the highest rank among everything else
In case both of these methods don't work then I suggest you show me the bigger picture as in type in your related HTML and complete CSS of the div