В чем различие между 'nth-of-type()' и 'nth-child()'?

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

Основные отличия

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

Пример

Давайте рассмотрим следующий HTML-код:

<ul>
    <li>Первый элемент списка</li>
    <div>Это не li</div>
    <li>Второй элемент списка</li>
    <li>Третий элемент списка</li>
</ul>

Теперь применим селекторы nth-child() и nth-of-type():

/* Применяется к любому второму ребенку */
ul > :nth-child(2) {
    background-color: yellow; /* Это выделит div */
}

/* Применяется только ко второму элементу li */
ul > li:nth-of-type(2) {
    background-color: lightblue; /* Это выделит второй li */
}

Результат:

• ul > :nth-child(2) выделит div, потому что он является вторым ребенком элемента <ul>.
• ul > li:nth-of-type(2) выделит второй элемент <li>, который в нашем случае будет "Второй элемент списка".

Заключение

При работе с CSS важно знать, какой селектор использовать в зависимости от ваших нужд. Если вы хотите выбрать элемент на основе его позиции среди всех детей, используйте nth-child(). Если же вам нужно выбрать элемент конкретного типа, то лучше воспользоваться nth-of-type(). Это поможет избежать неожиданных результатов при стилизации ваших элементов.