"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Обзор хостингов
Дополнительно


Реклама на сайте:




Псевдоклассы и псевдоэлементы


папка digest

Урок №6

Разница между псевдоклассами и псевдоэлементами

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

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

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

Синтаксис у них простой и одинаковый: псевдоклассы и псевдоэлементы указываются уже после объявления селектора, затем двоеточие : и название псевдокласса или псевдоэлемента.

Вы, наверное не раз обращали внимание на то, что на некоторых сайтах при наведении курсора на ссылку она меняет цвет. Это возможно благодаря псевдоклассам и псевдоэлементам.

Пример:

/* селектор двоеточие псевдокласс */
a:hover {
  color: #000; /* текст ссылки при наведении становится чёрным */
}

Вышеуказанный код обозначает, что при наведении (hover) на ссылку, то есть элемент a (<a>) цвет текста ссылки (color) будет чёрным.

Псевдоклассы

Псевдоклассы предназначены для получения различных динамических эффектов при изменении элементов, которые могут меняться со временем или в результате действий пользователей. При записи в CSS-файле псевдоклассы имеют вид:

селектор:псевдокласс {значения} => a:hover{color:red}

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

Наиболее распространенные псевдоклассы:

hover - при наведении курсора на элемент
focus - при клике на элемент, например поле для ввода данных
active - при активации элемента пользователем, то есть в момент клика
link - стиль для не посещённых ссылок
visited - стилевое оформление к посещенным ссылкам
target - переход к выбранному фрагменту документа, в адресе после # указывается имя идентификатора
root - определение корневого элемента документа
indeterminate - стиль для флажков (radio) и переключателей (checkbox) в неопределенном состоянии
checked - стиль для radio и checkbox в выбранном положении: input:checked
firstchild - стиль для первого дочернего элемента селектора
lastchild - изменения в последнем элементе родителя
onlychild - для дочерних элементов, единственных у родителя
lang (en) - определение языка элемента, где en выбранный язык


Пример: a:hover {color:blue}

Сохранив эту запись в файле стилей, на сайте при наведении на ссылку, она будет менять цвет на голубой.



Псевдоэлементы

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

Наиболее применяемые псевдоэлементы:

after - добавление контента ПОСЛЕ указанного элемента
before - добавление контента ДО указанного элемента
firstletter - стили для первой буквы в контенте элемента
firstline - стилевое оформление первой строки текста в элементе
selection - применение стилей при выделении текста в элементе

Пример: .new:before {content:"Внимание!"; color:blue;}

Сохранив эту запись в файле стилей, на сайте перед элементом с классом new, мы увидим голубой текст


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

 



Создано|Обновлено: 24.05.2020.