Apply :not in nested table - html

Question

table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
I have a nested table as follows -
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Requirement - Only TEXTA and TEXTB should be colored in red. In real scenario there are many rows. I want only the first td of each row in the parent table to be colored. I am doing something like -
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
This is not giving me any result. What is the correct way of achieving this?

Answer 1

Spent a while playing around with this. The best I can do is to suggest using 2 lines of CSS rather than 1. One selector to do all of the first row of td and one to set the nested ones back to how they belong.
table.parent tr:first-child td {
color: red;
}
table.nested tr:first-child td {
color: black;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>

Answer 2

You said that..
I want only the first td of each row in the parent table to be colored
So, I am assuming you want TEXTA and TEXTC to be colored (and not TEXTB as you stated).
If thats the case, then your idea was to select elements (first td of each row) if they dont contain a specific child element (table.nested).
This is not possible with CSS2 or CSS3.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
See CSS selector - element with a given child
Edit
You can use jquery/javascript to do so.
For example, to add opacity and color css properties:
$(document).ready(function(){
$('table.parent > tbody > tr > td:first-child').each(function(){
if ($(this).has('table.nested').length == 0){
$(this).css('opacity', '0.5');
$(this).css('color', 'red');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>

Answer 3

Just give some class to TEXTA & TEXTB
for example:
(html)
<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>
(css)
.red-color-text{color: red;}