Стилизация вложенных n-ных дочерних элементов для нескольких родительских элементов

Для поиска решения для стилизации определенных вложенных элементов в различных родительских структурах рассмотрите следующую разметку :

• one
• two

• three

• four

Цель — применить стили к «one» и «three», независимо от того, являются ли они первыми дочерними элементами. каждого

.

Ограничение :nth-child()

Попытки использовать :nth-child() терпят неудачу, поскольку он применяется только к элементам, которые у одного и того же родителя. В этом сценарии селектор CSS .foo li:nth-child(1), .foo li:nth-child(3) будет нацелен только на первых дочерних элементов каждого

.

Альтернатива Решения

JavaScript:

Использование такой библиотеки, как jQuery, позволяет выбирать элементы, используя мощные возможности фильтрации JavaScript. Например, следующий скрипт будет нацелен на первый и третий элементы

• в контейнере .foo:

  $('.foo li:eq(0), .foo li:eq(2)')

  Явная маркировка элементов:

  Вы можете явно пометить нужные элементы классами или идентификаторами, чтобы разрешить их выбор с помощью CSS. Например, добавление классов к первому и третьему элементам

• :

• one
• two

Затем вы можете использовать CSS для таргетинга на отмеченные элементы:

.foo .first,
.foo .third {
    color: red;
}