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

При стилизации вложенных элементов с использованием селектора nth-child важно отметить, что селектор работает в одном родительском контексте. Это может привести к проблемам при настройке определенных дочерних элементов для нескольких родительских элементов.

Проблема:

Рассмотрите следующую разметку:

    
one
        
two
    
three
    
four
    

Цель состоит в том, чтобы стилизовать первый и третий элементы li внутри .foo. Используя следующий CSS:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

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

Решение:

Использование CSS в одиночку невозможно нацелиться на n-ных детей от нескольких родителей. Однако существуют альтернативные решения:

• JavaScript: Библиотеки, такие как jQuery, упрощают манипулирование элементами DOM и выбор определенных из них, например $('.foo li:eq( 0), .foo li:eq(2)').
• Явная разметка: Добавьте классы или идентификаторы в первый и третий элементы li явно, например:

    
one
        
two
    
three
    
four
    

Затем придайте им стиль, используя недавно добавленные классы:

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