How to make css active only in one table? (duplicate table class)-CodePudding

I have 2 tables with same class elements like:

/* and css to make number increases in Numbers List col */

.myTbl tbody {
  counter-reset: rowNumber;
}

.myTbl tbody tr {
  counter-increment: rowNumber;
}

.myTbl tbody tr td:nth-child(1)::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}

<table >
  <thead>
    <tr>
      <td>Numbers List</td>
      <td>Content</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>A</td>
    </tr>
    <tr>
      <td></td>
      <td>B</td>
    </tr>
    <tr>
      <td></td>
      <td>C</td>
    </tr>
  </tbody>

  <table >
    <thead>
      <tr>
        <td>C</th>
          <td>D</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>

I want the css only active in specific table like table 1 , but I'm having duplicate classes. How to do it?

And I cant affect the html table like change class or add id,... cause It's exported from other, only js or jquery to do it.

I tried adding ::nth-child(1) not working, is there a way same like eq() in js?

CodePudding user response：

:first-child or nth-child(1) are actually work, you need to select from the parent

body .myTbl:first-child tbody {
  counter-reset: rowNumber;
  background: yellow
}

<table >
  <thead>
    <tr>
      <td>Numbers List</td>
      <td>Content</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
  </tbody>

  <table >
    <thead>
      <tr>
        <th>C</th>
        <th>D</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>

CodePudding user response：

First, you had unclosed tags.
Second, Using pseudo selectors is the key. But there is a difference between :first-child & :first-of-type.

/* and css to make number increases in Numbers List col */

.myTbl tbody {
  counter-reset: rowNumber;
}

.myTbl tbody tr {
  counter-increment: rowNumber;
}

/* OR :first-child */
.myTbl:first-of-type tbody tr:first-of-type td::before {
  content: '•';
  min-width: 1em;
  margin-right: 0.5em;
}

<table >
  <thead>
    <tr>
      <td>Numbers List</td>
      <td>Content</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>A</td>
    </tr>
    <tr>
      <td></td>
      <td>B</td>
    </tr>
    <tr>
      <td></td>
      <td>C</td>
    </tr>
  </tbody>
</table>

<table >
  <thead>
    <tr>
      <td>C</td>
        <td>D</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>