Объясните разницу между селекторами nth-child() и nth-of-type()

Селекторы :nth-child() и :nth-of-type() — это два мощных инструмента в CSS, которые позволяют выбирать элементы на странице в зависимости от их положения в родительском элементе. Несмотря на их схожесть, они имеют важные различия в том, как они работают.

1. Селектор :nth-child()

Селектор :nth-child(n) выбирает элемент на основании его положения среди всех дочерних элементов родителя. Это означает, что :nth-child() учитывает тип элементов. Например, если вы используете :nth-child(2), это будет означать, что вы выберете второго дочернего элемента, независимо от того, какого он типа (например, div, p и т.д.).

Пример использования :nth-child():

<ul>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <p>Третий элемент (не li)</p>
    <li>Четвертый элемент</li>
</ul>

<style>
    li:nth-child(2) {
        color: red; /* Этот селектор применится ко второму li (красный цвет). */
    }

    /* Этот селектор не будет действовать на третий элемент, так как это не li */
</style>

В этом примере селектор li:nth-child(2) выделит второй элемент списка li, который будет красным.

2. Селектор :nth-of-type()

Селектор :nth-of-type(n) выбирает элементы на основании их номера среди дочерних элементов определенного типа. Это означает, что он игнорирует элементы других типов. Если у вас есть список, стоящий из элементов разных типов (например, div, p, li и т.д.), селектор :nth-of-type() будет учитывать только элементы указанного типа.

Пример использования :nth-of-type():

<ul>
    <li>Первый элемент li</li>
    <li>Второй элемент li</li>
    <p>Первый элемент p</p>
    <li>Третий элемент li</li>
</ul>

<style>
    li:nth-of-type(2) {
        color: blue; /* Этот селектор применится ко второму li (синего цвета). */
    }

    p:nth-of-type(1) {
        color: green; /* Этот селектор применится к первому p (зеленый цвет). */
    }
</style>

В этом примере селектор li:nth-of-type(2) выделит второй элемент li, который будет синим. А селектор p:nth-of-type(1) выделит первый элемент p, устанавливая ему зеленый цвет.

Основные различия

• :nth-child(n): считает все дочерние элементы, независимо от их типа. Если указанный номер (например, 2) не является дочерним элементом указанного типа, этот селектор не будет применен.
• :nth-of-type(n): считает только дочерние элементы указанного типа, игнорируя все остальные типы.

Таким образом, выбор между этими селекторами зависит от того, хотите ли вы выбирать элементы по порядку среди всех дочерних элементов (используя :nth-child()) или только по порядку среди определённых типов элементов (используя :nth-of-type()).

Эти селекторы предоставляют гибкость при стилизации элементов, что делает их важными инструментами для любого фронтенд-разработчика.