Какой CSS селектор вычленит первое вхождение по классу?

Question

[Alexey ZloDeeV]

Имеется стандартная структура таблицы:

<table>
    <tbody>
      <tr>
        <td></td>
        <td class="highlight"></td>
        <td class="highlight"></td>
      </tr>
      <tr>
        <td class="highlight"></td>
        <td class="highlight"></td>
        <td></td>
      </tr>
    </tbody>
  </table>

Каким CSS селектором можно поймать крайние элементы имеющие класс highlight?
.highlight:first-child срабатывает только если элемент с этим классом является первым дочерним. Т.е. в приведенном html такой селектор отстилит только элемент во втором <tr>

Знаю о существовании :first-of-type, но в данном примере имеется только класс

Answer 1

[Alexey ZloDeeV]

В общем, решение имеется, но оно лишь усложнило задачу.
Чтобы выделить первый элемент по классу можно сделать следующее:
Навесить стили на весь класс .highlight {}, а потом перекрыть их селектором .highlight ~ td.highlight {}, который сработает на всех элементах, которые идут после первого попавшегося по классу.

Answer 2

[Igor Lanko]

Ещё в CSS есть селектор :nth-child(n).

Где n — номер позиции.

Например:

<ul>
<li>Красный текст</li>
<li>Чёрный текст</li>
<li>Чёрный текст</li>
</ul>

li { 
color: #000;
}

li:nth-child(1) {
color: red;
}