Получите больше возможностей над своим веб-дизайном, используя эти усовершенствованные селекторы CSS.

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

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

Понимание псевдоклассов CSS

Псевдокласс CSS похож на специальное ключевое слово, которое вы можете использовать с селекторами для стилизации элементов разными способами. Эти ключевые слова помогают нацеливаться на элементы, когда происходят определенные события, например, когда пользователь наводит указатель мыши на элемент, щелкает его или вводит что-то в поле ввода.

Псевдоклассы делают вашу веб-страницу более интерактивной и отзывчивой, изменяя внешний вид и поведение элементов в зависимости от действий пользователя. Когда ты

instagram viewer
используйте их с другими селекторами 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, одновременно добавляя интерактивность и стиль в ваш веб-дизайн.