Разбираем nth-child и nth-of-type

Псевдокласс :nth-child и :nth-of-type — очень полезный инструмент для выборки нужных элементов без использования jQuery. Я активно их использую при верстке сайтов.

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

Давайте этот момент исправим и попытаемся разобраться:
Для чего нужны эти псевдоклассы?
В чем же принципиальная разница между :nth-child и :nth-of-type?

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

:nth-of-type также выбирает элементы по их номеру, относительно родительского элемента, но при этом отбирает элементы только определенного типа.

Пример #1

Давайте разберем пример. Допустим у нас есть следующая HTML-разметка, в которой нам требуется выделить красным цветом второй абзац с текстом "CSS"

<div>
	<p>HTML</p>
	<p>CSS</p>
	<p>JS</p>
</div>

К текущей задаче мы можем применять любой из псевдоклассов, потому что результат в обоих случаях будет одинаков.

Можем использовать :nth-child

p:nth-child(2) {
	color: #f00;
}

А можем использовать :nth-of-type

p:nth-of-type(2) {
	color: #f00;
}

Попробуйте сами и вы в этом убедитесь. В обоих случаях будет выделен красным цветом абзац с текстом "CSS".

Пример #2

А теперь давайте HTML-код немного изменим, допустим добавив туда заголовок.

<div>
	<h3>Категории</h3>
	<p>HTML</p>
	<p>CSS</p>
	<p>JS</p>
</div>

При текущем раскладе результат уже будет разный.

Применив псевдокласс :nth-child, а именно:

p:nth-child(2) {
	color: #f00;
}

Мы увидим, что выделен красным цветом окажется абзац с текстом "HTML". Это точно не второй абзац, как нам требовалось.

А вот применив псевдокласс :nth-of-type:

p:nth-of-type(2) {
	color: #f00;
}

Мы увидим, что по прежнему выделен абзац с текстом "CSS".

Почему такое происходит?

Все дело в том, что селектор p:nth-child(2) отбирает абзац, у которого номер позиции равен 2, относительно родительского элемента.

Формально он действует примерно так: ищет тег который стоит под вторым номером относительно родительского элемента (в примере #2 - тег h3 будет первым, тег p с текстом "HTML" будет вторым) и далее проверяет является ли найденный тег абзацем, т.е. тегом p. Если оба условия выполняются, то к элементу применится наше CSS правило, если же к примеру на второй позиции стоял не тег p, а что-то другое, то правило бы не применилось.

Из-за того, что :nth-child отбирает элементы согласно их общей нумерации внутри родительского элемента, то любое изменение HTML-разметки может кардинально изменить внешнее отображение в браузере, что собственно мы можем наблюдать на приведенных выше примерах.

Что же касается селектора p:nth-of-type(2), то он отбирает элементы только заданного типа.

Формально он действует примерно так: внутри родительского элемента будут отобраны все теги p, а далее среди них будет выбран тег, который имеет второй номер.

Таким образом, псевдокласс :nth-of-type не обращает внимания на общую нумерацию внутри родительского элемента, а работает лишь с элементами заданного типа.
Именно поэтому при изменении HTML-разметки у нас не поменялся результат.

Я надеюсь, что теперь вы поняли отличие между :nth-child и :nth-of-type.
В одной из следующих статей мы с вами разберем детально, как с помощью данных псевдоклассов делать более сложные выборки, которые гарантированно пригодятся вам на практике.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев нет

Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад