Получите больше возможностей над своим веб-дизайном, используя эти усовершенствованные селекторы CSS.
CSS поддерживает множество селекторов для определения элементов для стилизации, каждый из которых имеет свой собственный набор правил. Хотя большинство методов выбора просты, псевдоклассы и псевдоэлементы обеспечивают большую гибкость. Они позволяют выбирать элементы на основе их состояния или положения в структуре или выбирать определенные части контента.
Эти селекторы могут быть непростыми в использовании, и псевдоклассы легко перепутать с псевдоэлементами, так как же их отличить?
Понимание псевдоклассов CSS
Псевдокласс CSS похож на специальное ключевое слово, которое вы можете использовать с селекторами для стилизации элементов разными способами. Эти ключевые слова помогают нацеливаться на элементы, когда происходят определенные события, например, когда пользователь наводит указатель мыши на элемент, щелкает его или вводит что-то в поле ввода.
Псевдоклассы делают вашу веб-страницу более интерактивной и отзывчивой, изменяя внешний вид и поведение элементов в зависимости от действий пользователя. Когда ты
используйте их с другими селекторами CSS, они обеспечивают точный контроль над стилем и интерактивностью.Синтаксис и использование псевдоклассов CSS
Синтаксис псевдокласса CSS состоит из двоеточия (:), за которым следует имя псевдокласса. Вот основной синтаксис:
selector:pseudo-class {
/* styles */
}
В этом синтаксисе:
- селектор относится к элементу или элементам, которые вы хотите выбрать и применить к ним стили. Это может быть элемент HTML, класс, идентификатор или более сложный селектор, например комбинация. Селектор не является обязательным, но обычно вы его используете; без него ваш псевдокласс будет нацелен на все элементы, к которым он может применяться.
- псевдокласс — это ключевое слово, обозначающее конкретное состояние или состояние, на которое вы хотите ориентироваться.
CSS делит псевдоклассы на несколько групп в зависимости от их функциональности и условий, для которых они предназначены. Вот основные категории и несколько примеров:
Взаимодействие с пользователем | |
---|---|
:наведите курсор |
Выбирает элемент при наведении на него указателя мыши. |
:активный |
Выбирает элемент, когда пользователь его активирует, обычно путем щелчка. |
:посетил |
Выбирает ссылки, которые посетил пользователь. |
Структурный | |
:Первый ребенок |
Выбирает первый дочерний элемент родительского элемента. |
:последний ребенок |
Выбирает последний дочерний элемент родительского элемента. |
:nth-ребенок (n) |
Выбирает элементы на основе их положения внутри родительского элемента, что позволяет ориентироваться на определенных дочерних элементов. |
Связанные с формой | |
:неполноценный |
Выбирает отключенные элементы формы. |
:проверено |
Выбирает отмеченные переключатели или флажки. |
Состояние элемента пользовательского интерфейса | |
:неверный |
Выбирает недопустимые элементы формы. |
:необходимый |
Выбирает обязательные поля элементов формы. |
:необязательный |
Выбирает элементы формы, которые являются необязательными полями. |
Связанные со ссылками | |
:связь |
Выбирает непосещенные ссылки. |
Языковой | |
:lang() |
Выбирает элементы на основе языка, указанного в их атрибуте «lang». |
Вы можете попробовать общий пример, применение эффектов :hover к изображениям в галерее. Типичные стили включают увеличение или затемнение этих изображений, когда кто-то наводит на них курсор.
Изучение псевдоэлементов CSS
Псевдоэлемент CSS похож на специальное ключевое слово, которое можно использовать с селекторами для стилизации определенных частей содержимого элемента или для вставки дополнительного содержимого. Эти ключевые слова позволяют вам выбирать элементы и стилизовать их на основе структуры их контента.
Псевдоэлементы улучшить дизайн и макет вашей веб-страницы предоставляя вам возможность стилизовать элементы способами, которые традиционно были возможны только с реальными элементами HTML.
Синтаксис и реализация псевдоэлементов CSS
Псевдоэлементы в CSS имеют особый синтаксис, включающий использование двух двоеточий (::), за которым следует имя псевдоэлемента. Вот основной синтаксис:
selector::pseudo-element {
/* styles */
}
В этом синтаксисе:
- селектор нацелен на элемент, к которому вы хотите применить псевдоэлемент. Это может быть любой допустимый селектор CSS, включая отсутствие вообще.
- псевдоэлемент — это имя псевдоэлемента, на который вы хотите настроить таргетинг. В селекторе можно использовать только один псевдоэлемент, поскольку их сочетание не имеет смысла.
Вот некоторые из псевдоэлементов:
::до |
Вставляет содержимое перед содержимым выбранного элемента. |
::после |
Вставляет содержимое после содержимого выбранного элемента. |
::первое письмо |
Стилизирует первую букву текста внутри элемента. |
::выбор |
Стилизирует часть текста, выделенную пользователем курсором. |
::маркер |
Стилизирует поле маркера элемента списка (например, маркера или номера в списке). |
:: сигнал |
Применяет стили к репликам в медиа-элементах, таких как |
Псевдоэлементы ::before и ::after могут быть особенно сложными для понимания, поэтому их практика поможет вам освоить все остальное.
Сходства и различия
Вот сходства и различия между псевдоклассами и псевдоэлементами CSS:
Псевдоклассы |
Псевдоэлементы |
|
---|---|---|
Синтаксис |
Префикс одинарного двоеточия (:). |
Префикс с двумя двоеточиями (::). |
Применение |
Выбирайте и стилизуйте элементы в зависимости от их состояния, положения или взаимодействия с пользователем. |
Создавайте стили для определенных частей содержимого элемента или создавайте виртуальные элементы. |
Селекторы |
Может возникнуть в любой точке сложного или составного селектора. |
Должен быть последним компонентом селектора и может появляться только один раз. |
Вставка контента |
Не вставляет контент, в первую очередь для стилизации в зависимости от состояния. |
Можно вставлять содержимое или виртуальные элементы до или после содержимого выбранного элемента. |
Типографский Стиль |
Обычно не используется для типографского стиля. |
Используется для оформления текста и типографики (например, ::first-line, ::first-letter). |
Целевые части |
Нацеливается на целые элементы. |
Нацеливается на определенные части содержимого элемента. |
Поддержка браузера |
В целом хорошая поддержка. |
В целом поддерживается хорошо, но некоторые старые браузеры могут иметь ограниченную поддержку. |
Псевдоклассы и псевдоэлементы важны в CSS для создания различных стилей и интерактивных функций. Хотя у них есть некоторые сходства, каждый из них играет свою уникальную роль в веб-дизайне и разработке.
Псевдоклассы и псевдоэлементы в действии
Вы можете попрактиковаться в использовании псевдоклассов и псевдоэлементов CSS в разных проектах, чтобы оценить свое понимание. Примеры простых проектов, которые вы можете реализовать, включают, среди прочего, карточки профилей, навигационные меню и стили списков. Эти проекты предоставляют практический опыт для улучшения ваших навыков CSS, одновременно добавляя интерактивность и стиль в ваш веб-дизайн.