Как получить n-й дочерний элемент с помощью селекторов CSS2?

Есть ли возможность получить n-й элемент упорядоченного списка в CSS2?

(аналогично :nth-child() в CSS3)


FYI: Я пытаюсь запрограммировать немецкую версию Parcheesi на совместимость с XHTML 1.1 и CSS2 и пытаюсь создать игровое поле с помощью упорядоченных списков, поэтому параметры движения предопределены структурой данных. Для позиционирования вокруг центра я хотел бы выбрать элементы списка по номеру.

Ответ 1

Вы можете использовать смежные комбонатные компиляторы в сочетании с :first-child псевдокласс, повторяя комбинаторы столько раз, сколько вам нужно, чтобы достигнуть определенного n-го ребенка. Это также упоминается в ответе на другой вопрос.

Для любого элемента E начинайте с E:first-child, затем добавьте + E для последующих детей, пока не достигнете таргетинга элемента. Конечно, вам не нужно использовать один и тот же элемент E; вы можете отключить его для любого типа, класса, идентификатора и т.д., но важными битами являются знаки :first-child и +.

В качестве примера, чтобы получить третий li своего ol, следующий селектор CSS3:

ol > li:nth-child(3)

Будет реплицироваться в CSS2 следующим образом:

ol > li:first-child + li + li

Иллюстрация:

<ol>
  <li></li> <!-- ol > li:nth-child(1), ol > li:first-child -->
  <li></li> <!-- ol > li:nth-child(2), ol > li:first-child + li -->
  <li></li> <!-- ol > li:nth-child(3), ol > li:first-child + li + li -->
  <li></li> <!-- ol > li:nth-child(4), ol > li:first-child + li + li + li -->
</ol>

Обратите внимание, что с нет компиляторов-сиблингов, которые смотрят на предыдущих братьев и сестер (ни в CSS2, ни в CSS3), вы не можете эмулировать :nth-last-child() или :last-child с помощью CSS2 селекторы.

Кроме того, вы можете эмулировать только :nth-child(b) для одного определенного дочернего элемента за раз, где b является постоянным числом в формуле an+b (как описано в spec); вы не можете достичь каких-либо сложных формул только с соседними комбинаторами.

Ответ 2

Нет, вы не можете. nth-child() появился в CSS3, поэтому я не думаю, что существует проблема с этой проблемой.