CSS: Why does an unreferenced class get priority?

Question

What I want

I want to reduce the .table padding for my th and td's to 5px.

Issues

I have referenced a child class .information-table but .data-table seems to be taking priority even though I have not referenced it.

https://jsfiddle.net/kcfyjdr2/32/

.table {
    width:100%;
    border-collapse: collapse;
    border-spacing: 0px;
    border: 1px solid #ddd;
}
.table th, td {
    text-align: left;
    padding: 12px;
  }
  
.table .information-table th, td {
    padding: 5px;
}
  
.table .data-table th, td {
    padding: 10px;
}

<table class="table information-table">
  <tbody>
    <tr>
      <td><b>Test Program:</b></td>
      <td><b>Report Name:</b></td>
      <td><b>Location of Test:</b></td>
    </tr>
  </tbody>
</table>

How can I fix this and please could I get an explanation?

CSS allows to specify several comma-separated selectors. Each of those is a complete selector on its own. So `.table th, td` actually means: Apply the following rules to any `th` element that is a descendant to an element with class `.table`, **and** apply the rules to any `td` element. — connexo, Apr 07 '22 at 07:53

score 4 · Answer 1 · answered Apr 07 '22 at 07:35

it's because your selector is

.table .data-table th, td

the issue come from , td it will take each td use in your html

to fix use the selector

.table.data-table th, .table.data-table th td

moreover your selector for information table must be

.table.information-table th, .table.information-table td {

.table {
    width:100%;
    border-collapse: collapse;
    border-spacing: 0px;
    border: 1px solid #ddd;
}
.table th, td {
    text-align: left;
    padding: 12px;
  }
  
.table.information-table th, .table.information-table td {
    padding: 5px;
    color: blue;
}
  
.table.data-table th, .table.data-table th td {
    padding: 10px;
    color: red;
}

<table class="table information-table">
  <tbody>
    <tr>
      <td><b>Test Program:</b></td>
      <td><b>Report Name:</b></td>
      <td><b>Location of Test:</b></td>
    </tr>
  </tbody>
</table>

CSS: Why does an unreferenced class get priority?

1 Answers1