Still confused about centering dt-numeric columns

Gee-E-Emh

Link to test case: https://live.datatables.net/kaviconi/1/
Description of problem:
I saw the question from May 1 about this issue, but wasn't clear on the resolution. I'm trying to center a numeric column but I couldn't get it to work without adding CSS:

th.dt-type-numeric, td.dt-type-numeric {
text-align: center !important;
}

It just seemed odd to me that non-numeric columns still work okay without my CSS addition, as shown in the Javascript section of the test case where I have columnDefs entries like, "{ targets: [ 1 ], className: 'dt-center dt-head-center' }".

When I look at the results with Chrome and Edge Developer Tools (see attached screen shot), the CSS Computed section for the text-align element with an Age column entry selected seems to be picking "right" instead of "center" because of the CSS weighting of the dt-type-numeric entries. That is, I think "right" has more CSS specificity weight because it has more matching selectors than "center", partially because "right" includes the matching "td.dt-type-numeric" and "th.dt-type-numeric" and "center" does not, as you can see in the screen shot. Using "!important" seems to correct this. Am I understanding this issue correctly ?

allan

Am I understanding this issue correctly ?

100%! You've just summarised CSS specificity is a way that only a small percentage of web devs could I reckon!

DataTables uses table.dataTable td.dt-type-numeric as the selector for the right alignment of the number type. Anything with a higher specificity would override it - e.g.:

table.dataTable tr td.dt-type-numeric {
  text-align: center;
}

https://live.datatables.net/kaviconi/2/edit

Allan