Аналог псевдокласса :nth в CSS?

Question

Если использовать Jquery, то там есть возможность выбора номера элемента из всей выборки (:nth). А в чистом CSS есть только :nth-child, который ищет элементы среди детей?

То есть селектор

$('.selectors:nth(1) .t-d:nth(1)')

в Jquery работает. В CSS пишет is not a valid selector.

А есть ли аналогичное поведение на чистом css?

Answer 1

Все селекторы с указанием индекса в CSS вычисляют индекс внутри родителя, а не внутри выборки

Селектор :nth, является синонимом селектора :eq, который в jQuery объявлен устаревшим и рекомендованным к замене на одноименный метод.

В css есть похожий селектор :nth-child однако он ведет отсчет индекса элемента внутри внутри родителя, а не в конечной выборке, поэтому может выбирать несколько элементов вместо одного. Сам индекс ведет счет от 1.

// Applies yellow background color to a single <li>
$("ul.nav li:eq(1)").css("backgroundColor", "#ff0");

ul.nav li:nth-child(2) {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
  <li>List 1, item 1</li>
  <li>List 1, item 2</li>
  <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>

БЛОГ НА HUSL

Аналог псевдокласса :nth в CSS?

Ответы (1 шт):

Все селекторы с указанием индекса в CSS вычисляют индекс внутри родителя, а не внутри выборки