How to target first matching descendant? - css

Question

How do we target the first matching descendant, but not all other descendants further down the tree? e.g.,
if the HTML looks like
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>...</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I've attempted the below, but it doesn't seem to work
.wrapper > table > tbody > tr > td {
...
}

Answer 1

Inherited properties, such as color, would effect the children of the td even if they are not matched by the rule. In this case, 2nd td is a child of the 1st td.
You can reset inherited properties by initial on the children of the matched element. You can also set other properties on any effect children.
Example with color:
.wrapper > table > tbody > tr > td {
color: red;
}
.wrapper > table > tbody > tr > td > * {
color: initial;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
i want to target this td
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>but not this one</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

Answer 2

Your css will only target direct td descendants of any direct tr descendants of any direct tbody descendants of any direct table descendants of any .wrapper classed elements.
However, keep in mind that descendants of those tds selected may inherit styles from a parent or at least appear to inherit them.
Below is an example to show that you can style them differently.
.wrapper > table > tbody > tr > td {
background: red;
padding: 4px;
color: white;
}
td {
background: blue;
padding: 10px;
color: yellow;
font-weight: 800;
}
#later-descendant {
background: white;
color: indigo;
padding: 3px;
font-weight: 300;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>yellow</td>
<td id='later-descendant'>indigo</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>