Say I have this:

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

Notice how I have these two CSS blocks, with overlapping references (they both refer to both th and td). Say I have two tables, then:

<table>
  <tr>
  <td>This is one table, no formatting</td>
  <tr>
</table>

<table>
  <tr>
  <td>This is another table, to which I want to apply formatting.</td>
  <tr>
</table>

How would I only apply the CSS style to the bottom table? Here's what I have tried so far:

Attempt 1: Lump all the attributes into one style and put it into <div>

.betterformat {
  border: thin groove blue;
  border-collapse: collapse;
  background-color: red;
}
<div class="betterformat">
  <--Here's all my <table> <tr> and <td> tags...--
</div>

This did not work, so then I thought

Attempt 2: Make 2 separate classes for table and tr/td

But no, I know that going through and setting class for each individual <tr> and <td> tag is time consuming and obviously not the way to go. For future reference, is there a good page that explains how overlapping references work in CSS, and how class interacts with it, and perhaps stuff like ID?

CodePudding user response：

Specify the CSS type selectors with your class selector (in your case betterformat :

<style>
  .betterformat table,
  .betterformat th,
  .betterformat td {
    border: 1px solid white;
    border-collapse: collapse;
  }
  
  .betterformat th,
  .betterformat td {
    background-color: #96D4D4;
  }
</style>



<table>
  <tr>
    <td>This is one table, no formatting</td>
    <tr>
</table>

<div class="betterformat">
  <table>
    <tr>
      <td>This is another table, to which I want to apply formatting.</td>
      <tr>
  </table>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I would assign a different class to each table and then style the classes as needed:

.table1 {
  border: 1px solid red;
}

.table1 td {
  color: green;
}

.table2 {
  border: 1px solid blue;
}

.table2 td {
  color: orange;
}

<table class="table1">
  <tr>
  <td>This is one table.</td>
  <tr>
</table>

<br>

<table class="table2">
  <tr>
  <td>This is another table.</td>
  <tr>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>