CSS第一个和最后一个孩子与父母无关

Question

我想让第一个和最后一个.highlighted元素变红。中间突出显示的类应该是紫色的。寻求任何数量或安排的动态 CSS 解决方案 .highlighted

.highlighted {
  background: purple;
}

.highlighted:first-child,
.highlighted:last-child {
  background: red;
}

<td>
  <span>Test</span>
</td>
<td>
  <span>Test</span>
</td>
<td>
  <span class="highlighted">Test</span>
</td>
<td>
  <span class="highlighted">Test</span>
</td>
<td>
  <span class="highlighted">Test</span>
</td>
<td>
  <span class="highlighted">Test</span>
</td>
<td>
  <span>Test</span>
</td>
<td>
  <span>Test</span>
</td>
<td>
  <span>Test</span>
</td>