Структурные псевдоклассы
Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 12 из 43.
Структурные псевдоклассы в CSS используются для стилизации элементов на основе их положения или структуры внутри HTML-документа. Они позволяют выбирать такие элементы, как первый дочерний элемент, последний дочерний элемент или элементы с определенным порядковым номером, без необходимости использования дополнительных классов или идентификаторов (ID).
Общие примеры включают:
:first-child— выбирает первый дочерний элемент родителя.
:last-child— выбирает последний дочерний элемент родителя.:nth-child(n)— выбирает n-й дочерний элемент (например, каждый 2-й, 3-й и т. д.).
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Шпаргалка
Структурные псевдоклассы стилизуют элементы на основе их положения в HTML-документе:
:first-child— выбирает первый дочерний элемент родителя:last-child— выбирает последний дочерний элемент родителя:nth-child(n)— выбирает n-й дочерний элемент (например, каждый 2-й, 3-й и т. д.)
Попробуйте сами
В этом уроке нет задания по программированию.
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела CSS Mastery
1Мастерство селекторов — Комбинации
ВведениеСелектор потомковДочерний селекторСмежный селекторОбщий родственный селекторИтоговое испытание4Проект: Выпадающее меню
Добавление подменюОтображение подменюДополнительная стилизацияПоле ввода и кнопка2Интерактивные псевдоклассы
ПсевдоклассыЭффекты наведенияЭффекты фокусаАктивные стилиИтоговое испытание3Структурные псевдоклассы
Структурные псевдоклассыВыбор первого дочернего элементаВыбор последнего дочернего элементаСила шаблонов: использование nth-childЗадание на повторение