:nth-child и :nth-of-type
Выбирайте элементы по их позиции внутри родителя, используя формулы nth и селекторы типа.
«:nth-child и :nth-of-type» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое структурные псевдоклассы?
Структурные псевдоклассы выбирают элементы на основе их положения внутри родителя. Они избавляют от необходимости добавлять классы или JavaScript для выбора определённых дочерних элементов.
:first-child и :last-child
Выберите первый или последний дочерний элемент родителя:
<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>
Основы :nth-child()
:nth-child(n) выбирает элементы на основе их положения (нумерация начинается с 1) среди соседних элементов любого типа.
<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>
:nth-child() с ключевыми словами
Используйте ключевые слова odd или even для чередующегося оформления строк:
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
:nth-child() с формулами
Используйте формулу An+B, где A — шаг, а B — смещение. n начинается с 0 и увеличивается.
3n— каждый третий (3, 6, 9...)3n+1— первый в каждой тройке (1, 4, 7...)-n+3— только первые три элемента
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
:nth-of-type()
:nth-of-type() учитывает только соседние элементы того же типа, игнорируя остальные. Это важно, если типы элементов чередуются.
<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>
:first-of-type и :last-of-type
Выберите первый или последний элемент определённого типа тега среди соседних элементов:
<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />
:nth-child и :nth-of-type
Ключевое различие:
p:nth-child(2)— выбирает второй дочерний элемент, IF он является элементом<p>p:nth-of-type(2)— выбирает второй элемент<p>независимо от других элементов
:only-child и :only-of-type
:only-child выбирает элемент, который является единственным дочерним элементом своего родителя. :only-of-type выбирает элемент, который является единственным элементом своего типа у родителя.
<div><p>I'm the only child in this div.</p></div>
:nth-child с фильтрацией по селектору S (современный синтаксис)
Современный CSS позволяет отфильтровать элементы, учитываемые формулой nth, с помощью :nth-child(An+B of selector):
<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>
Практика: отступ сетки в последней строке
Удалите нижний внешний отступ у последнего видимого элемента:
<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
Быстрая проверка
Какой селектор выбирает каждый третий элемент списка, начиная с первого?
Повторение
:nth-child() учитывает всех соседних элементов по их положению; :nth-of-type() учитывает только соседние элементы того же тега. Используйте odd/even для полосатых таблиц. Формула An+B позволяет создавать такие шаблоны, как «каждый третий» или «первые пять», без добавления классов.
Часто задаваемые вопросы
Урок «:nth-child и :nth-of-type» бесплатный?
Да — полный текст урока «:nth-child и :nth-of-type» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «:nth-child и :nth-of-type»?
Выбирайте элементы по их позиции внутри родителя, используя формулы nth и селекторы типа. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «:nth-child и :nth-of-type»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- :hover :focus :active и :visited
- :nth-child и :nth-of-type
- :not() :is() и :where()
- :checked :disabled и псевдоклассы состояния формы