наверх




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

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

a:hover {
  color: #000;
}


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


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

Список самых используемых псевдоклассов, которые пригодятся в работе:

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


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


Это те элементы, которые не определены среди других элементов на документе.
Главная возможность псевдоэлементов — генерировать содержимое, не установленное на HTML документе. К примеру, добавить какой-нибудь текст перед или после определенного элемента, или добавить стилевую рамку и прочее.

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

after установка указанного контента после элемента
before аналогично с after, но контент располагается перед элементом
firstletter определение стиля первой буквы в контенте
firstline стилевое оформление первой строки в тексте
selection применение стилей к выделенному тексту


С псевдоэлементами можно привести один из распространенных примеров установки фраз перед/после элемента:

.quote:before {
  content: "Цитата ";
}


И перед элементом с классом quote будет выведена запись "Цитата". Это лишь один из способов реализации данного рода псевдоэлементов.





Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.