что такое псевдоэлементы css
Псевдоэлементы
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Синтаксис использования псевдоэлементов следующий.
Вначале следует имя селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже.
Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
Далее перечислены все псевдоэлементы, их описание и свойства.
:after
Пример 16.1. Применение :after
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Результат примера показан на рис. 16.1.
Рис. 16.1. Добавление текста к абзацу с помощью :after
:before
Пример 16.2. Использование :before
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4
Результат примера показан ниже (рис. 16.2).
Рис. 16.2. Изменение вида маркеров с помощью :before
И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).
Пример 16.3. Использование :first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан ниже (рис. 16.3).
Рис. 16.3. Создание выступающего инициала
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
:first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Пример 16.4. Выделение первой строки текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента :first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
Вопросы для проверки
1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
2. Что делает следующий стиль?
OL LI:first-letter <
color: red;
>
3. Какой селектор написан с ошибкой?
Ответы
2. Изменяет цвет первой буквы элемента нумерованного списка.
Псевдоэлементы
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Синтаксис использования псевдоэлементов следующий.
Вначале следует имя селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже.
Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
Далее перечислены все псевдоэлементы, их описание и свойства.
:after
Пример 16.1. Применение :after
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Результат примера показан на рис. 16.1.
Рис. 16.1. Добавление текста к абзацу с помощью :after
:before
Пример 16.2. Использование :before
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4
Результат примера показан ниже (рис. 16.2).
Рис. 16.2. Изменение вида маркеров с помощью :before
И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).
Пример 16.3. Использование :first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан ниже (рис. 16.3).
Рис. 16.3. Создание выступающего инициала
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
:first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Пример 16.4. Выделение первой строки текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента :first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
Вопросы для проверки
1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
2. Что делает следующий стиль?
OL LI:first-letter <
color: red;
>
3. Какой селектор написан с ошибкой?
Ответы
2. Изменяет цвет первой буквы элемента нумерованного списка.
Псевдоклассы и псевдоэлементы
Предыдущие статьи этого учебника преимущественно были посвящены применению CSS стилей непосредственно к HTML элементам через использование различных селекторов, таких как селектор типа, селектор класса, id селектора и селектора потомков.
Современный стандарт каскадных таблиц стилей позволяет форматировать не только элементы к которым можно явно обратиться, но и предоставляет возможность стилизовать такие части документа, которые явно не определены в дереве документа, либо стилизовать их в зависимости от внешних факторов. Например, изменение первой строки абзаца, или изменение вида ссылки, на которую в настоящий момент наведен указатель мыши, история навигации в документе, а так же размещение сгенерированного текстового содержимого после или до определенного элемента.
В этой статье учебника пойдет речь о специальных псевдоклассах и псевдоэлементах, которые дают возможность затронуть форматирование на странице такие особенности элементов, которые явным образом не указать.
Псевдоэлементы
Псевдоэлементы ::first-letter и ::first-line
В современном стандарте CSS 3 используются 5 (пять) основных псевдоэлементов, которые добавляются к селекторам и имеют следующий синтаксис:
Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3.
Первыми псевдоэлементами, которые мы рассмотрим будут ::first-letter и ::first-line. Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.
Псевдоэлемент ::first-line позволяет стилизовать первую строку абзаца, которая будет отличаться от основного текста. Данный псевдоэлемент дает более широкие возможности для оформления текста.
Давайте рассмотрим пример их использования:
Что такое псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements)
Всем приветствую, с вами Сергей Никонов и в этой статье я расскажу про псевдоклассы (pseudo classes), псевдоэлементы (pseudo elements) и как с помощью них задавать CSS-стили для вашего сайта. На примерах мы рассмотрим как с работают самые часто используемые псевдоклассы и псевдоэлементы при верстке сайтов.
Это один из уроков курса по верстке веб-сайтов HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровне, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.
Только на сайте FructCode вы можете найти актуальных версии моих курсов!
Что такое псевдоклассы (pseudo classes)
Если вы еще не знакомы с понятием CSS-селектор (css selector) и не знаете, что такое CSS-селекторы (css selectors), прочитайте об этом статью или посмотрите видеоурок из курса HTML/CSS Advanced, а для закрепления ваших знаний, пройдите интерактивные упражнения.
Псевдоклассы задаются через двоеточие “:”, далее идет название псевдокласса, например, так задается псевдокласс :hover для HTML-тега : a:hover <…>.
Смотрите видео «Что такое псевдоклассы(pseudo classes) и псевдоэлементы(pseudo elements)»
Подпишитесь на YouTube канал FructCode, чтобы не пропустить полезные видео!
Псевдокласс :hover
Псевдокласс :active
Псевдокласс :focus
, и других при установке курсора мыши в этот элемент.
Псевдоклассы :first-child и :last-child
Псевдоклассы :first-of-type и :last-of-type
Псевдокласс :nth-child
Псевдокласс :not
Что такое псевдоэлементы (pseudo elements)
Псевдоэлементы ::before и ::after
и в него помещен текст “Have a good day!”. И с помощью псевдоклассов ::before и ::after мы добавляем “сердечки” слева и справа от надписи “Have a good day!”:
Псевдоэлементы
Псевдоэлемент ::-ms-browse
Позволяет задать стиль кнопки «Обзор» при загрузке файлов.
Псевдоэлемент ::-ms-check
Задаёт стиль переключателей и флажков в Internet Explorer.
Псевдоэлемент ::-ms-clear
Задаёт стиль кнопки для очистки текстового поля. Исходно эта кнопка не видна, она появляется в правой части поля только при вводе текста.
Псевдоэлемент ::-ms-expand
Задаёт стиль кнопки раскрытия списка формы в браузерах Internet Explorer и Edge.
Псевдоэлемент ::-ms-fill
Задаёт стиль индикатора прогресса в браузерах Internet Explorer и Edge. Само значение индикатора и его положение меняется динамически посредством скриптов.
Псевдоэлемент ::-ms-fill-lower
Задаёт стилевые параметры слайдера в браузерах Internet Explorer и Edge.
Псевдоэлемент ::-ms-fill-upper
Задаёт стилевые параметры слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-reveal
Задаёт стиль кнопки для просмотра пароля в поле формы. Кнопка исходно не видна и появляется в правой части поля при вводе пароля.
Псевдоэлемент ::-ms-thumb
Задаёт стиль ползунка для слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-ticks-after
Применяет стилевые параметры к делениям ниже дорожки слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-ticks-before
Применяет стилевые параметры к делениям выше дорожки слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-tooltip
Применяет стилевые параметры к всплывающей подсказке слайдера, где отображается выбранное текущее значение, в Internet Explorer и Edge.
Псевдоэлемент ::-ms-track
Задаёт стиль дорожки ползунка для слайдера в Internet Explorer и Edge.
Псевдоэлемент ::-ms-value
Позволяет изменять стиль элементов формы в браузерах Internet Explorer и Edge.
Псевдоэлемент ::after
Псевдоэлемент, который используется для вывода желаемого контента после содержимого элемента, к которому он добавляется.
Псевдоэлемент ::backdrop
Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.
Псевдоэлемент ::before
Применяется для отображения контента до содержимого элемента, к которому он добавляется.
Псевдоэлемент ::first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется.
Псевдоэлемент ::first-line
Задаёт стиль первой строки форматированного текста.
Псевдоэлемент ::placeholder
Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder.
Псевдоэлемент ::selection
Применяет стиль к выделенному пользователем фрагменту текста.