How to use nested class selector for tr and td?

If this is my html structure:

<tr class="editing">
   <td class="col-2"></td>
   <td class="col-2"></td>
</tr>

how come this nested css works fine:

.editing {
    padding: 1em 1.5em;      
    .col-2 {
        font-size: 11em;
    }
}

but this does not:

.editing {
    padding: 1em 1.5em;      
    td {
        font-size: 11em;
    }
}

I am using Chrome 114 and according to https://caniuse.com/css-nesting CSS nesting is supported. I know how to use a non-nested approach this is an exercise in using a newly supported CSS feature.

>Solution :

According to this article:

HTML elements currently require the & symbol in front or being wrapped with :is().

…and the spec:

The selector of nested style rules must not start with an identifier or a functional notation.

This means you need to rewrite your second rule as:

.editing {
  padding: 1em 1.5em;

  :is(td) {
    font-size: 11em;
  }
}