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

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

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


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

Ответы [ 2 ]

24 голосов
/ 13 марта 2012

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

Для любого элемента E начните с E:first-child, затем добавьте + E для последующих потомков, пока не достигнете элементачто вы нацеливаетесь.Конечно, вам не обязательно использовать один и тот же элемент E;Вы можете отключить это для любого типа, класса, ID и т. д., но важными битами являются знаки :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 голосов
/ 13 марта 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...