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

Question

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;
}
<div class="tableRow">
<table class="myTbl">
<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>
</div>
<div class="tableRow">
<table class="myTbl">
<thead>
<tr>
<td>C</th>
<td>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</div>
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?

Answer 1

: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 class="myTbl">
<thead>
<tr>
<td>Numbers List</td>
<td>Content</td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
<table class="myTbl">
<thead>
<tr>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>

Answer 2

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 class="myTbl">
<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 class="myTbl">
<thead>
<tr>
<td>C</td>
<td>D</td>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>