"Истина где-то рядом."
 Уроки HTML |
 Скрипты PHP |
 Шаблоны HTML |
| Уроки HTML |
| Уроки CSS |
| HTML5 |
| Скрипты JAVA |
| Вёрстка сайта |
| Примеры PHP |
| Графика |
| Оптимизация сайта |
| Полезное |
Псевдоклассы и псевдоэлементы
Урок №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, мы увидим голубой текст
Теперь вы узнали о псевдоэлементах и псевдоклассах. Правильное использования данных инструментов позволяет создать более качественный дизайн страницы.
