'CSS: Why does an unreferenced class get priority? [duplicate]

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?

htmlcss


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jeremy-denis

Related Questions