Need to select the first td that is not hidden from this table. That is the first td having the class ts-wrap
<table>
<tr class="ts-row">
<td style="display:none;"> </td>
<td style="display:none;"> </td>
<td style="text-align:right;" class="ts-wrap" colspan="2">Select Me</td>
<td style="text-align:right;" class="ts-wrap" colspan="2"></td>
<td style="text-align:right;" class="ts-wrap" colspan="2"></td>
<td style="text-align:right;" class="ts-wrap" colspan="2"></td>
</tr>
<tr class="ts-row">
<td style="display:none;"> </td>
<td style="display:none;"> </td>
<td style="text-align:right;" class="ts-wrap" colspan="2">Select Me too</td>
<td style="text-align:right;" class="ts-wrap" colspan="2"></td>
<td style="text-align:right;" class="ts-wrap" colspan="2"></td>
<td style="text-align:right;" class="ts-wrap" colspan="2"></td>
</tr>
</table>
Tried .ts-row td.ts-wrap:first-child and .ts-row td.ts-wrap:first-of-type in both CSS and jQuery; both of them are not for this scenario
.ts-row td.ts-wrap:first is working for jQuery but not a valid CSS selector.
How to achieve this in CSS?