Вы можете использовать соседние братские комбинаторы в сочетании с :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 );Вы не можете получить какие-либо сложные формулы только с помощью соседних одноуровневых комбинаторов.