Всем привет. В самом начале своей работы в веб-дизайне, я изучал все тяжелым способом: методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen и прочих волшебных вещей, окружающих нас сегодня. Если бы раньше кто-либо показал мне азы веб дизайна, особенно по части CSS, это было бы невероятно полезно.
Если вы опытный веб-дизайнер или разработчик, то вы должны знать большинство обсуждаемых здесь псевдоклассов и псевдоэлементов. Однако я рекомендую вам ознакомиться с , возможно, вы встретите что-то незнакомое для себя.
Перед тем как погрузиться в вопрос, разберемся с терминами - если в названии есть псевдоклассы и псевдоэлементы, то что значит часть слова “псевдо”? Вот что говорит dictionary.com :
прилагательное
1. Ненастоящий, но похожий внешне; притворяющийся; ложный или мнимый 2. Почти такой же или пытающийся быть таким же
Не перегружаясь техническим определением W3C, псевдокласс можно определить, как фантомное состояние или специфическую характеристику элемента, которая может быть выделена с помощью CSS. Наиболее распространенные псевдоклассы это:link , :visited , :hover , :active , :first-child и:nth-child . Существуют и другие псевдоклассы, им мы тоже уделим внимание.
Псевдоклассы в стилях всегда выделяются предшествующим двоеточием (:), затем идет название псевдокласса и иногда значение в скобках.
Псевдоэлементы похожи на виртуальные элементы, которые мы можем обрабатывать как обычные HTML-элементы. Но они не существуют в дереве документа или в DOM, мы создаем их с помощью CSS.
Наиболее распространенные псевдоэлементы это:after , :before и:first-letter , мы рассмотрим их в конце статьи.
Одно или два двоеточия ставить перед псевдоэлементами?
Короткий ответ для большинства случаев - без разницы.
Двойное двоеточие (::) было добавлено в CSS3, чтобы дифференцировать для различения псевдоэлементов типа::before и::after от псевдоклассов, таких как:hover и:active . Все браузеры поддерживают двойное двоеточие, кроме Internet Explorer (IE) 8 и ниже.
При этом некоторые псевдоэлементы, например, ::backdrop работают только с двойным двоеточием.
Лично я использую одно двоеточие ради совместимости с устаревшими браузерами, разумеется, кроме тех случаев, когда псевдоэлементам требуется двойное двоеточие.
Вы можете выбрать любой вариант, здесь нет однозначного “за” или “против”.
Однако спецификация на момент написания статьи рекомендует использовать одно двоеточие , по уже упомянутой здесь причине - обратной совместимости.
Не забывайте, что в CSS3 псевдоэлементы выделяются двойным двоеточием, типа a::after { … } , для их отличия от псевдоклассов. Вы можете иногда это видеть в CSS. При этом CSS3 также позволяет использовать одно двоеточие ради обратной совместимости и в настоящее время мы рекомендуем придерживаться этого синтаксиса.
В заголовках этой статьи, псевдоэлементы, поддерживающие оба синтаксиса будут показаны в обоих вариантах, а, соответственно, псевдоэлементы работающие только с двойным двоеточием будут показаны с ним.
Когда использовать и не использовать генерируемый контент в CSS
Генерируемый контент в CSS реализуется с помощью комбинации свойства content с псевдоэлементами:before или:after .
Контентом может быть простой текст или контейнер, которым мы манипулируем при помощи CSS, чтобы выводить графическую форму или декоративный элемент . Здесь я буду говорить о первом типе контента - тексте.
Если генерируемый контент использует излишнее содержание для украшения, скрин-ридеры будут читать его, что ухудшит впечатления пользователей.
Используйте генерируемый контент для декорации и незначительного текста, но убедитесь, что он правильно обрабатывается скрин-ридерами, чтобы использующие эту технологию не отвлекались на него. Основывайтесь на методике “прогрессивного улучшения”, когда собираетесь использовать генерируемый контент.
На Smashing Magazine есть отличная статья Габриеля Романато об использовании генерируемого контента.
Экспериментальные псевдоклассы и псевдоэлементы
Экспериментальными называют те псевдоклассы и псевдоэлементы, чья спецификация еще не стабильна и не окончательна. Их синтаксис и поведение еще могут измениться.
Однако мы можем использовать экспериментальные псевдоклассы и псевдоэлементы с помощью вендорных префиксов; о поддержке вы можете узнать с помощью Can I Use , а для удобства работы есть такие инструменты как -prefix-free или Autoprefixer .
В этой статье у всех экспериментальных псевдоклассов и псевдоэлементов будет соответствующая пометка.
Псевдоклассы
Мы начнем с псевдоклассов для определенных состояний.
Псевдоклассы состояний
Псевдоклассы состояний обычно применяются после действий пользователя. При этом “действием” может считаться и отсутствие действия, например, в случае с непосещенной ссылкой.
Итак, рассмотрим их.
:link
Псевдокласс:link представляет нормальное состояние ссылок и используется для выделения ссылок, которые до сих пор не посещены. В стилях рекомендуется объявлять этот псевдокласс перед всеми остальными классами этой категории. Полный порядок псевдоклассов такой: :link , :visited , :hover и:active .
A:link {
color: orange;
}
Этот псевдокласс можно пропустить:
A {
color: orange;
}
Псевдокласс:visited используется для стилизации ссылок, уже посещенных пользователем. В стилях он указывается вторым, после псевдокласса:link:
A:visited {
color: blue;
}
:hover
Псевдокласс:hover используется для стилизации элемента, на который в данный момент наведен курсор. Это может быть любой элемент, хотя применение этого псевдокласса для ссылок является самым распространенным случаем.
A:hover {
color: orange;
}
:active
Псевдокласс:active используется для стилизации “активированных” элементов, путем нажатия мыши или касания к экрану. Активация также может производиться и с клавиатуры, также как в случае с псевдоклассом:focus .
Он и работает аналогично:focus , с единственной разницей, что псевдокласс:active фиксирует событие между нажатием и отпусканием клавиши мыши.
Оно следует четвертым в стилях (после:hover).
A:active {
color: rebeccapurple;
}
:focus
Псевдокласс:focus используется для стилизации элемента, получившего фокус с помощью курсора, касания или нажатия на клавиатуре. Он часто используется в элементах форм.
A:focus {
color: green;
}
Input:focus {
background: #eee;
}
Бонус: миксин Sass для ссылок
Если вы используете препроцессоры CSS, типа Sass, этот раздел должен заинтересовать вас. Если вы их не используете (не бойтесь, это нормально), вы можете пропустить его.
Итак, в духе оптимизации нашего рабочего процесса, ниже показан миксин Sass, позволяющий создать базовый набор ссылок.
Идея миксина состоит в отсутствии настроек по умолчанию в качестве аргументов, мы просто декларируем все 4 состояния ссылок.
Псевдоклассы:focus и:active обычно декларируются вместе, но при желании вы можете разделить их.
Учтите, этот миксин может быть применен к любому элементу HTML, не только к ссылкам. Вот он:
Структурные псевдоклассы направлены на дополнительные данные в дереве документа или DOM и не могут быть заменены другим типом селекторов или их комбинацией.
:first-child
Псевдокласс:first-child выделяет элемент, который является первым потомком своего родительского элемента.
В следующем примере только первый элемент li будет выделен оранжевым текстом.
This text will be orange.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
li:first-child {
color: orange;
}
:first-of-type
Псевдокласс:first-of-type выделяет первый элемент своего типа в указанном родительском контейнере.
В следующем примере первый элемент li и первый элемент span будут выделены оранжевым цветом.
This text will be orange.
Lorem ipsum dolor sit amet. This text will be orange.
Lorem ipsum dolor sit amet.
ul:first-of-type {
color: orange;
}
:last-child
Псевдокласс:last-child выделяет элемент, которыя является последним дочерним элементом в родительском контейнере.
В следующем примере, последний элемент li будет выделен оранжевым цветом.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
This text will be orange.
li:last-child {
color: orange;
}
:last-of-type
Псевдокласс:last-of-type выделяет последний элемент своего типа в родительском контейнере.
В следующем примере, текст в последнем li и последнем span будет оранжевым.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. This text will be orange.
Lorem ipsum dolor sit amet.
This text will be orange.
ul:last-of-type {
color: orange;
}
:not
Псевдокласс:not также известен как псевдокласс-отрицание. Он принимает в скобках аргумент - другой селектор. Этим аргументом может быть и другой псевдокласс. Аргументы могут составлять цепочку, но сам:not не может в этой цепочке передаваться в качестве аргумента.
В следующем примере, псевдокласс:not выберет все элементы, не подпадающее под селектор-аргумент. Оранжевым будет весь текст, кроме элемента li с классом.first-item:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
li:not(.first-item) {
color: orange;
}
Теперь попробуем сделать цепочку из двух псевдоклассов:not . У всех элементов будет черный цвет и желтый фон, кроме элемента li с классом.first-item и последнего li в списке.
Псевдокласс:nth-child выделяет один или более элементов в зависимости от их порядкового номера в разметке.
Это один из самых универсальных и надежных псевдоклассов в CSS.
Все псевдоклассы:nth принимают аргумент в виде формулы в скобках. Формула может быть просто целым числом, может структурироваться в виде an+b или использовать ключевое слово odd или even .
В формуле an+b:
a это целое число;
n это литерал (т.е. мы просто используем букву n внутри формулы);
+ это оператор (это может быть как + , так и -);
b это целое число, используемое только при использовании оператора.
Вот список с греческим алфавитом, на базе которого мы сделаем несколько примеров:
Alpha
Beta
Gamma
Delta
Epsilon
Zeta
Theta
Iota
Kappa
Выделим второй элемент в списке, только “Beta” будет оранжевой:
Ol:nth-child(2) {
color: orange;
}
Теперь выделим все элементы с порядковыми номерами, кратными двум. Оранжевыми будут “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa”:
Ol:nth-child(2n) {
color: orange;}
Те же самые четные элементы можно выделить и с помощью ключевого слова even:
Ol:nth-child(even) {
color: orange;
}
А теперь выберем все элементы кратные двум, начиная с шестого. Итак, оранжевыми будут “Zeta,” “Theta” и “Kappa”.
Ol:nth-child(2n+6) {
color: orange;
}
:nth-last-child
Псевдокласс:nth-last-child работает аналогично:nth-child , но выбирает элементы не с начала, а с конца.
Продолжим мучать греческий алфавит. Выберем второй элемент с конца - оранжевой у нас будет только “Iota”:
Ol:nth-last-child(2) {
color: orange;
}
Теперь выберем все дочерние элементы по порядковому номеру с конца, кратному двум. Это будут Iota,” “Eta,” “Epsilon,” “Gamma” и “Alpha”:
Ol:nth-last-child(2n) {
color: orange;
}
Теперь выделим их же с помощью ключевого слова:
Ol:nth-last-child(even) {
color: orange;
}
И, наконец. выберем все элементы с конца кратные двум начиная с шестого. “Epsilon,” “Gamma” и “Alpha”!
Ol:nth-last-child(2n+6) {
color: orange;
}
:nth-of-type
Псевдокласс:nth-of-type схож с:nth-child с той разницей, что он обладает большей специфичностью, так как выбирает конкретный тип элемента внутри родительского контейнера.
В следующем примере, оранжевый цвет будет у второго параграфа.
Heading Goes Here
Lorem ipsum dolor sit amet.
This text will be orange.
p:nth-of-type(2) {
color: orange;
}
:nth-last-of-type
Псевдокласс:nth-last-of-type делает то же, что и:nth-of-type , но отсчитывая с конца.
В следующем примере мы будем выбирать второй параграф с конца (это будет первый параграф в статье):
Heading Goes Here/h1>
This text will be orange.
Lorem ipsum dolor sit amet.
p:nth-last-of-type(2) {
color: orange;
}
Дополнительные ресурсы по классам семейства:nth
“CSS3 Structural Pseudo-Class Selector Tester ”, Ли Веру;
В следующем примере, в первом ul есть только один элемент, который будет выделен оранжевым. В следующем ul несколько потомков, поэтому их этот селектор не затронет.
This text will be orange.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
ul:only-child {
color: orange;
}
:only-of-type
Псевдокласс:only-of-type выбирает элемент, у которого нет соседних элементов того же типа. Он похож на:only-child , но более осмыслен за счет указания конкретного элемента.
В следующем примере в первом ul только один элемент списка, который и будет выделен оранжевым.
This text will be orange.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
li:only-of-type {
color: orange;
}
:target
Псевдокласс:target выбирает элемент, ID которого используется в качестве хэша в URL.
В следующем примере, статья с ID target будет выделяться, когда URL в адресной строке будет завершаться на #target .
URL: http://awesomebook.com/#target
:target pseudo-class
:target {
background: yellow;
}
Совет: короткая запись background в стилях успешно заменяет background-color .
Псевдоклассы валидации
Формы всегда были ядом веб-дизайна и веб-разработки. С помощью псевдоклассов валидации, мы можем сделать процесс заполнения форм более плавным и приятным.
Заметьте, что несмотря на то, что большинство псевдоклассов этого раздела работают с элементами форм, некоторые из них могут работать и с другими элементами HTML.
:checked
Псевдокласс:checked выбирает радиокнопки, чекбоксы и опции, которые были отмечены пользователем.
В следующем примере, при выделении пользователем чекбокса, его метка подсвечивается, что улучшает интерфейс.
:default
Псевдокласс:default выбирает элемент, заданный в качестве дефолтного в группе похожих элементов.
В случае, если вам надо выбрать кнопку по умолчанию в форме с незаданным классом, вы можете использовать псевдокласс:default .
Учитывайте, что наличие кнопки “Reset” или “Clear” в форме создает проблемы с юзабилити. Подробнее об этом можно прочитать в следующих статьях.
“Reset and Cancel Buttons ”, Nielsen Norman Group (2000)
“Killing the Cancel Button on Forms for Good ”, UX Movement (2010)
:disabled
Псевдокласс:disabled выбирает отключенный элемент формы (элемент, который пользователь не может выделить, отметить, активировать или перенести на него фокус).
В следующем примере поле ввода name , поэтому оно будет выведено наполовину прозрачным.
:disabled {
opacity: .5;
}
Совет:
в разметке не обязательно писать disabled="disabled" , того же результата можно достичь просто использовав атрибут disabled . Однако полная запись необходима в XHTML.
:empty
Псевдокласс:empty выбирает элементы, в которых нет никакого содержимого. Если в элемент есть другой элемент HTML, символ или пробел, элемент не считается пустым.
Вот более полные определения:
Пустой элемент
Нет содержимого или каких-либо символов. Комментарии HTML содержимым не считаются.
Не пустой элемент
В элементе есть какие-либо символы, даже невидимые, например, пробел.
В следующем примере:
В верхнем контейнере есть текст, поэтому у него будет оранжевый фон;
Во втором контейнере есть пробел, который считается контентом, его фон также будет оранжевым;
В третьем контейнере нет ничего - он пустой и поэтому у него желтый фон.
В последнем контейнере есть комментарий HTML, который не считается контентом и поэтому у контейнера желтый фон.
Псевдокласс:enabled выбирает элементы, включенные для пользователя; по умолчанию все элементы формы включены, если в разметке им не задан атрибут disabled .
Мы можем использовать комбинацию:enabled и:disabled , чтобы обеспечить визуальную обратную связь, улучшая тем самым пользовательский опыт.
В следующем примере, ранее отключенное поле ввода name включено, к нему добавлена однопиксельная граница зеленого цвета и полная непрозрачность.
:enabled {
opacity: 1;
border: 1px solid green;
}
Совет:
использование в разметке enabled="enabled" не требуется, достаточно просто enabled ; исключением является только XHTML.
:in-range
Псевдокласс:in-range выбирает элементы, которым задан диапазон и значение, которых входит в этот диапазон.
В следующем примере поле ввода поддерживает диапазон между 5 и 10, все значения между ними вызовут измение цвета границы поля на зеленый.
Псевдокласс:out-of-range выбирает элемент, у которого есть диапазон и значение которого не входит в этот диапазон
В следующем примере поле ввода поддерживает диапазон от 1 до 12 - для всех остальных значений будет задан оранжевый цвет границы поля.
input:out-of-range {
border: 1px solid orange;
}
:indeterminate
Псевдокласс:indeterminate выбирает элементы ввода типа радиокнопок и чекбоксов, которые не выделены или выделение которых снято после загрузки страницы.
Образцом этого можно назвать загрузку страницы с радиокнопками, ни одна из которых не выбрана по умолчанию или ситуацию, когда свойство indeterminate задается чекбоксу с помощью JavaScript.
:indeterminate + label {
background: orange;
}
:valid
Псевдокласс:valid выбирает элемент формы, если она заполнена корректно в соответствии с требуемым форматом.
В следующем примере поле ввода email отформатировано правильно, поэтому оно будет считаться валидным и, соответственно, получит однопиксельную зеленую границу.
Input:valid {
border: 1px solid green;
}
:invalid
Псевдокласс:invalid выбирает элемент формы, если она заполнена некорректно в соответствии с требуемым форматом.
В следующем примере, поле ввода email отформатировано неправильно, поэтому оно будет считаться невалидным и, соответственно, получит однопиксельную оранжевую границу.
:optional
Псевдокласс:optional выбирает поля ввода, которые не являются обязательными. Другими словами, любой элемент input без атрибута required будет выбран псевдоклассом:optional .
В следующем примере поле ввода опционально - у него нет атрибута required и поэтому текст в этом поле будет серым.
:optional {
color: gray;
}
:read-only
Псевдокласс:read-only выбирает элемент, которые не может быть отредактирован пользователем. Он похож на:disabled - и выбор между ними зависит от использованного атрибута в разметке.
Этот псевдокласс может быть полезен, например, в форме с предварительно заполненной информацией, которую нельзя изменить, но которую надо показать пользователю.
В следующем примере у элемента input есть атрибут readonly . Мы выделим этот элемент серым цветом благодаря псевдоклассу:read-only .
input:read-only {
color: gray;
}
:read-write
Псевдокласс:read-write выбирает элементы, которые могут редактироваться пользователем. Он может работать со всеми элементами HTML с атрибутом contenteditable .
Этот псевдокласс можно сочетать с псевдоклассом:focus для улучшения пользовательского опыта в определенных ситуациях.
В следующем примере, пользователь может после щелчка мышью редактировать содержимое элемента div . Мы облегчим пользователю понимание этого, добавив стили, отличающие редактируемую часть контента от всего остального.
Click on this text to edit it
Lorem ipsum dolor sit amet, consectetur adipisicing elit!
Псевдокласс:required выбирает поля ввода, которым задан атрибут required .
В дополнение к традиционному астериску (*), которым обычно отмечают обязательные поля, мы можем добавить стили CSS, таким образом мы берем лучшее из двух миров.
В следующем примере, у поля ввода есть атрибут required . Мы можем улучшить впечатления пользователя, соответствующим стилем показав обязательность поля.
:required {
color: black;
font-weight: bold;
}
:scope (эксп.)
Псевдокласс:scope имеет смысл, когда он привязан к HTML-атрибуту scoped тега style .
Если этого атрибута у тега style нет в разделе страницы, значит этот псевдокласс выберет элемент html , который является зоной видимости для стилей по умолчанию.
В следующем примере, у блока HTML есть стили с атрибутом scoped , поэтому весь текст второго элемента section будет выделен курсивом.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
This text will be italicized
This text will be italicized.
Псевдоклассы, связанные с языком страницы
Языковые псевдоклассы связаны с текстом, содержащимся на странице. Они не работают с медиа-контентом типа изображений или видео.
:dir (эксп.)
Псевдокласс:dir выбирает элемент, направленность текста в котором определена в документе. Другими словами, чтобы использовать этот псевдокласс, нам надо в разметке у соответствующего элемента добавить атрибут dir .
На данный момент поддерживается два направления текста: ltr (слева направо) и rtl (справа налево).
На момент написания статьи только Firefox (с префиксом -moz-dir()) поддерживается псевдокласс:dir . В будущем префикс, скорее всего, будет не нужен, поэтому в примерах селектор задан как с префиксом, так и без него.
Примечание:
Сочетание префиксной и безпрефиксной версий в одном правиле не работает. Надо создавать два отдельных правила.
В следующем примере оранжевым цветом будет выделен параграф на арабском (как известно, текст в нем пишется справа налево).
التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.
Псевдокласс:lang выбирает элемент с указанным языком. Язык может быть задан с помощью атрибута lang="" , соответствующего элемента meta или же в HTTP-заголовках.
Атрибут lang="" обычно используется с тегом html , но он также может применяться и к любому другому тегу.
Для чего этом можно использовать? Например, общей практикой является использование традиционных для каждого языка кавычек с помощью свойства CSS quotes . Однако большинство браузеров (включая IE9 и выше) способны добавлять нужные кавычки автоматически, если они не объявлены в CSS.
В зависимости от обстоятельств, это может помогать или мешать, так как есть разница между кавычками, автоматически добавляемыми браузером по умолчанию и обычно используемыми кавычками, добавленными в CSS.
Вот, например, немецкие кавычки, добавленные браузером:
„Lorem ipsum dolor sit amet.“
Однако, в большинстве случаев, немецкие кавычки добавленные в CSS выглядят так:
»Lorem ipsum dolor sit amet.«
Верными являются оба варианта. Поэтому решение остается за вами - отдать ли выбор кавычек на усмотрение браузера или использовать псевдокласс:lang и свойство CSS quotes .
Давайте добавим кавычки с помощью CSS.
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
:lang(en) q { quotes: "“" "”"; }
:lang(fr) q { quotes: "«" "»"; }
:lang(de) q { quotes: "»" "«"; }
Остальные псевдоклассы
Теперь перейдем к оставшемся псевдоклассам и их функциональности
:root
Псевдокласс:root ссылается на высший родительский элемент в документе.
Виртуально во всех случаях в роли:root будет элемент html . Однако это может быть и другой элемент, если используется другой язык разметки, такой как SVG или XML.
Давайте добавим фоновый цвет к элементу html .
:root {
background: orange;
}
Примечание:
мы можем добиться того же эффекта, использовав в качестве селектора html . Но так как:root псевдокласс у него большая специфичность, чем у селектора элемента.
:fullscreen (эксп.)
Псевдоклассс:fullscreen выбирает элемент, выведенный на всю ширину экрана.
Однако, он не рассчитан на работу при нажатии пользователем F11 и переходе браузера в полноэкранный режим. Он скорее ориентирован на работу с JavaScript Fullscreen API, предназначенном для изображений, видео и игр, выполняющихся в родительском контейнере.
О переходе в полноэкранный режим выводится сообщение в верхней части браузера, вернуться из него можно нажав клавишу Escape . Мы сталкиваемся с этим при просмотре видео в максимальном размере на YouTube или Vimeo.
Если вы собираетесь использовать псевдокласс:fullscreen , учитывайте, что стили браузеров в этом режиме очень различны. И вам придется использвать браузерные префиксы не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку Эрнан Райчерта screenfull.js , решающую большую часть проблем с кроссбраузерными глюками.
Рассмотрение Fullscreen API находится за пределами этой статьи, вот сниппет, который будет работать в браузерах на движках WebKit и Blink.
h1:fullscreen {
background: orange;
}
Псевдоэлементы
Как упоминалось в начале статьи, псевдоэлементы можно сравнить с виртуальными элементами, которые можно обрабатывать как обычные элементы HTML. Они не существуют в дереве документа или в DOM, это значит, что мы их создаем с помощью CSS.
Также напомню, что разница между двойным и одиночным доветочиями это просто визуальное различие между псевдоэлементами стандартов CSS 2.1 и CSS3, вы можете свободно использовать любой вариант.
::before/:before
Псевдоэлемент:before , также как и его сосед:after добавляет содержимое (текст или форму) к другому элементу HTML. Еще раз отмечу, что этого контента нет в DOM, но им можно манипулировать, как будто он есть. Свойство content надо добавлять в CSS.
Запомните, что добавленный в псевдоэлемент текст нельзя выделить.
Ricardo
h1:before {
content: "Hello "; /* Note the space after the word Hello. */
}
В результате будет выведено:
Примечание:
Обратили внимание на пробел после “Hello ”? Да, о пробелах надо позаботиться самостоятельно.
::after/:after
Псевдоэлемент:after также используется для добавления содержимого (текста или формы) к другому элементу HTML. Этот контент отсутствует в DOM, но им можно манипулировать, как будто он есть; свойство content надо добавлять в CSS. Текст, добавленный в псевдоэлемент, нельзя выделить.
Ricardo
h1:after {
content: ", Web Designer!";
}
В результате будет выведено:
Ricardo, Web Designer!
::backdrop (эксп.)
Псевдоэлемент::backdrop это бокс, генерируемый перед полноэкранным элементом, расположенным над всем остальным контентом. Он используется в сочетании с псевдоклассом:fullscreen для изменения цвета фона максимизированного окна - если вас не устраивает дефолтный черный.
Примечание:
для псевдоэлемента::backdrop обязательно двойное двоеточие, иначе он не работает.
Разовьем наш пример с псевдоклассом:fullscreen:
This heading will have a solid background color in full-screen mode.
h1:fullscreen::backdrop {
background: orange;
}
::first-letter/:first-letter
Псевдоэлемент:first-letter выбирает первый символ на строке текста. Если перед текстом есть элемент типа изображения, видео или таблицы, он не влияет на текст и первая буква по-прежнему выбирается из текста.
Это отличная вещь для использования в параграфах, для повышения типографской привлекательности без использования изображений и внешних ресурсов.
Совет:
этот псевдоэлемент способен захватывать первую букву, сгенерированного контента в:before , несмотря на его отсутствие в DOM.
H1:first-letter {
font-size: 5em;
}
::first-line/:first-line
Псевдоэлемент:first-line выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными.
При использовании в параграфе, например, только первая строка будет стилизована, даже если текст обтекает другой элемент.
P:first-line {
background: orange;
}
::selection
Псевдоэлемент::selection используется для стилизации выделенного текста. Браузеры на движке Gecko пока используют версию с префиксом::-moz-selection .
Примечание:
сочетание в одном правиле синтаксиса с префиксом и без префикса не работает, надо создавать два отдельных правила.
Псевдоэлемент::placeholder выбирает текст, добавленный в качестве заглушки в элементы формы с помощью атрибута placeholder .
Его также можно указывать как::input-placeholder , этот синтаксис фактически и используется в CSS.
Примечание:
этот элемент еще не является частью стандарта, с большой вероятностью его имплементация изменится в будущем, поэтому используйте его с осторожностью.
В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент::placeholder реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:
Псевдоклассы и псевдоэлементы CSS однозначно удобны, не так ли? Они дают такое количество возможностей, что вы чувствуете себя перегруженными. Но в этом все жизнь веб-дизайнеров и разработчиков.
Тщательно тестируйте код. Хорошо реализованные псевдоклассы и псевдоэлементы должны пройти долгий путь.
Временами кажется, что для того чтобы выжить в современном мире, необходимо знать, как создавать сайты. Даже в школах обучают Но для создания качественного ресурса этого мало. Необходимо еще знать основы каскадной таблицы стилей, в частности псевдоклассы и псевдоэлементы CSS.
Что это такое?
По негласному закону все стили, которые веб-мастер вписывает в CSS-разметку, используются для тех элементов структуры, которые можно увидеть в исходном коде. Однако существуют группы элементов, которые не прописываются в HTML-документе, однако для них тоже нужно задавать стили.
К примеру, в HTML-файле нет ни одно тега, который бы отвечал за дизайн заглавной буквы нового абзаца или области, что находится перед определенным элементом. Да и тегами невозможно показать активность ссылок или изменить изображение, когда курсор мышки наводят на него. Чтобы оформить эти и множество других значений, существуют селекторы CSS: псевдоклассы и псевдоэлементы.
Псевдоклассами называют селекторы, которые влияют на существующие элементы документа. Псевдоэлементами обычно задают и меняют область, которая изначально отсутствовала в исходном файле. Проще говоря, псевдоэлементы задают новые области страницы, которых не было в HTML-разметке, а псевдоклассы определяют состояние объектов при определенных условиях.
После: after
Первое, на что стоит обратить внимание, - псевдоэлементы CSS before и after, так как каждый уважающий себя ресурс использует их для усовершенствования внешнего вида, читабельности и привлекательности сайта. Эти элементы предоставляют возможность добавления новых областей, надписей и стилей до или после исходного документа.
Каждый, наверное, хотя бы раз видел на каком-либо сайте анонсы публикаций, после которых стояли слова: «Новинка», «Новое» или «Шок», «Избранное», «Лучшее», «Супер» и т. д. Эти объекты были заданы при помощи псевдоэлемента
Чтобы создать такую позицию, необходимо добавить в каскадную таблицу стилей такой код:
Здесь словом new задается название нового класса, поэтому перед нужным абзацем в HTML разметке нужно вписать: class="new". Название класса должно находиться между скобками открывающего тега. Если все сделать правильно, то после окончания абзаца на странице браузера появится надпись «Кое-что новенькое».
Естественно, в примере задан скрипт для простой надписи, но никто не говорил, что нельзя менять размер, цвет и позиционирование. Все необходимые параметры можно вписать в класс new после характеристики content. Разделять их нужно точкой с запятой и в конце закрыть фигурную скобку.
До: before
Практически идентичными характеристиками обладает псевдоэлемент С одним небольшим отличием: он предназначен для того, чтобы добавлять необходимые элементы перед объектом. Записывается точно так же, как и after, только со словом before.
Перед очередным абзацем текста можно добавить слова, которые привлекают внимание, а можно просто поместить перед текстом рисунок или элемент Юникода. К примеру, открывающие кавычки или отступы. Чтобы воплотить это в жизнь, необходимо добавить в CSS-разметку новый класс и задать необходимые характеристики. Самое простое решение будет выглядеть следующим образом:
Чтобы сделать отступы в конце документа, необходимо создать псевдокласс after и вместо content: open
написать content: close
, соответственным образом поменять позиционирование. Если в псевдоклассе before отступ был от левого поля, то в классе after он должен быть от правого. Также в разметку можно добавить изображение (допустим, тех же кавычек), и текст уже не будет смотреться как унылая простыня.
Эпичная сага: first
Большой популярностью в создании новых проектов пользуется и псевдоэлемент CSS first. В частности, это касается проектов с развлекательной и сказочной тематикой, а также веб-ресурсов исторического и научного направления.
Этот псевдоэлемент CSS имеет две характеристики - line и letter:
Letter
- изменяет первую букву того фрагмента текста, к которому его добавляют. Таким образом, он формирует буквицу - элемент, в котором базовая линия находится на несколько строк ниже относительно главного текста. Чтобы задать этот параметр в каскадной таблице стилей, нужно задать характеристики для параграфа. Например, P:first-letter {*** }
- и уже между скобками указать все необходимые параметры, такие как цвет, шрифт, размер. Если буквицу необходимо создать только для первого абзаца, тогда создается новый класс (так же, как и в примере с new: after
).
Line
- эта позиция полностью меняет первую строку абзаца. Очень удобно использовать в научных публикациях, если нужно выделить важную информацию. Записывается так же, как и прочие примеры. Но здесь важно помнить, что псевдоэлемент выделяет не предложение, а именно строку. В зависимости от того, каким браузером пользуется пользователь, у него первая строка может быть длиннее или короче, поэтому важно следить за тем, чтобы это выделение не смотрелось нелепо. Именно для таких случаев был создан в CSS псевдоэлемент переноса строки.
Новая строка
По факту этот элемент используется редко, ведь его успешно заменяет тег . Однако существуют ситуации, когда необходимо задавать разрыв строки именно псевдоэлементами. Для этих целей можно использовать тот же after. Для этого записывается следующий код: after { content: "\A"; white-space: pre;}
. Название класса нужно вписать между скобками открывающего тега, как только он закроется, после него и будет следовать разрыв строки.
Такой вариант отнимает больше времени при конструировании читабельного контента, и если нет необходимости работать с аномально неизведанными браузерами, то лучше ограничиться тегом .
Синтаксис псевдоклассов
Как уже было сказано, псевдоклассы определяют состояние элементов, с которыми взаимодействует пользователь. В отличие от псевдоэлементов CSS, которые задают невидимые структуре характеристики, мнимые классы ориентированы на Чтобы было понятнее, можно привести небольшой пример. Допустим, на сайте есть список полезных ссылок, пользователь переходит по ним, читает информацию, но спустя время наталкивается на тот контент, который уже видел. Он просто перешел на эту страницу еще раз, ведь ссылок много, и они ничем не отличаются. Чтобы такого не происходило, веб-мастера добавляют псевдокласс, который меняет цвет просмотренной ссылки, тогда пользователь будет точно знать, что он читал, а куда еще не переходил.
Все псевдоклассы записываются в таблицу каскадных стилей простым и проверенным синтаксисом:
Селектор: Псевдокласс {характеристики стиля: цвет, размер, отступ, позиционирование и т. д.}
Эти классы можно разделить на три основные группы:
те, что определяют состояние элемента;
те, что относятся к псевдоэлементам;
фиктивные классы, определяющие язык контента.
Псевдоклассы и состояние элементов
Рассмотрим же по порядку, какими могут быть псевдоклассы. Для первого подвида характерно изменение состояние элемента в зависимости от его состояния в конкретный момент. Это как было в примере выше: если по ссылке перешли, то она поменяет цвет. Сюда относят такие псевдоклассы:
:active.
Если применить этот псевдокласс, то при нажатии мышкой на отдельный фрагмент он станет активным. Это проявится в изменении цвета, увеличении размера, или появится анимация.
:link
. В основном применяется к ссылкам, которые пользователь еще не посещал. Они остаются неизмененными.
:focus
. Чаще всего используют для текстовых документов, когда пользователь, установив на поле курсор, может поменять цвет текста. Иногда это используют и для изображений. Например, выставляют картинку затененную, но при щелчке она приобретает естественный цвет.
:hover
. Когда пользователь просто наводит мышкой на определенный объект, он может поменять цвет или форму, при этом ему не нужно делать щелчок.
:visited
. В основном этот псевдокласс предназначен для посещенных ссылок, которые меняют свой цвет на фиолетовый по умолчанию.
Новички ошибочно предполагают, что эти псевдоклассы предназначены только для ссылок, но при должном желании и фантазии изменить можно любой элемент сайта.
Специально для псевдоэлементов CSS
К этой группе селекторов относят псевдоклассы, которые могут изменить псевдоэлементы. Таким псевдоклассом является :first-child
. В каскадной таблице стилей необходимо создать новый класс для :first-child
и задать цвет текста или его размер. Результат будет иметь следующий вид:
B:first-child { color: red; }
Чаще всего это делают тогда, когда необходимо выделять несколько фрагментов текста жирным шрифтом и только начало абзаца должно отличаться. Поэтому класс называют так же, как и тег, который отвечает за полужирный текст. Если применить это на практике, то благодаря псевдоклассу только первый выделенный полужирным шрифтом фрагмент будет иметь красный цвет, остальные слова будут стандартного черного цвета.
Также :first-child
используют, чтобы убрать отступ в первом абзаце, тогда вместо color: red;
необходимо будет написать text-indent: 0;
, а В заменить на Р (также обозначается тег, который отвечает за начало абзаца).
Язык контента
Псевдокласс :lang
в основном применяется к текстам, которые написаны разными языками. Например, если в статье есть цитаты на языке оригинала, то для них можно задать отдельные характеристики. Синтаксис для этого кластера будет иметь следующий вид:
Название класса:lang (язык) {характеристики текста (цвет, и т.д.)}
Что касается позиции "язык", то он обозначается согласно принятым нормам. Например, английский - en, русский - ru, немецкий - de и т. д. Благодаря этому псевдоклассу можно изменить стиль иностранного текста во всем документе.
Выводы
Псевдоклассы и псевдоэлементы CSS - это один из тех вопросов о каскадной таблице стилей, которые вызывают трудности в понимании. Однако здесь нет ничего сложного, главное - понимать, что псевдокласс - это определенное состояние, что выполняется при оговоренных ранее условиях. Например, при наведении курсора или щелчке мышки. Псевдоэлемент - самостоятельная часть документа, которая не входит в состав HTML-разметки, но может иметь свой стиль. Можно даже сказать, что это виртуальный HTML. Если посмотреть на ситуацию с такой стороны, то все становится предельно простым и понятным, а с такими знаниями уже можно начинать создавать сайты.
Приветствую Вас, уважаемые читатели блога. Сегодня продолжим тему изучения каскадных таблиц стилей. В одной из предыдущих статей мы рассматривали , но рассмотрели только часть из них. И на очереди у нас остались селекторы псевдоклассов и псевдоэлементов.
Псевдоэлементы
Псевдоэлементы
— разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы, а также они могут генерировать содержимое, которого нет в исходном html коде. Таким фрагментом может быть первый символ или первая строка в абзаце.
Псевдоэлементы используются не сами по себе, а только в совокупности с основными селекторами:
<основной селектор>:<псевдоэлемент> { <стиль> }
Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.
:first-letter
Привязывает стиль к первой букве текста в элементе web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение. Это позволяет создавать в тексте буквицу
(увеличенная первая буква, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) и выступающий инициал
(увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста).
Рассмотрим применение first-letter на примере создание выступающего инициала:
...
И результат примера:
Как видно на скриншоте, первая буква абзаца стала в два раза больше и изменила цвет на красный.
Псевдоэлемент:first-line привязывает стиль к первой строке текста в элементе веб страницы. Посмотрим действие псевдоэлемента:first-line на абзац текста:
...
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.
Результат:
:after и:before
Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content
, которое определяет содержимое для вставки.
Рассмотрим пример:
...
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.
Научным языком автомобиль это: Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.
Смотрим результат:
Как видим в конце каждого абзаца вставлен текст «сайт», как и прописано в css правиле в свойстве «content». Если в место «after» поставить «before», то текст вставиться в начале абзаца.
Псевдоклассы
Псевдоклассы позволяют привязать стиль к элементам веб страницы на основе их состояния и местоположения в дереве элементов. Примером такого состояния может служить гиперссылка, которая меняет свой цвет при наведении на нее курсора мыши.
При описании css правил псевдоклассы обычно используют в совокупности с основными селекторами:
<основной селектор><псевдокласс> { <стиль> }
Если псевдокласс указывается без селектора впереди (:hover), то он применяется ко всем элементам страницы.
Псевдоклассы условно делятся на три группы:
определяющие состояние элементов;
имеющие отношение к дереву элементов;
указывающие язык текста.
Псевдоклассы, определяющие состояние элементов
Псевдоклассы этой группы определяют состояние элемента html страницы и применяют стиль только для определенного состояния. Обычно псевдоклассы состояний применяются для гиперссылок, но иногда их применяют и для других элементов веб страницы.
Псевдокласс :link
применяется для не посещенных ссылок, т.е. ссылкам, на которые пользователь еще не нажимал. Записи a{...} и a:link{...} в таблице стилей дают одинаковый результат, поэтому псевдокласс:link можно не указывать.
Псевдокласс :visited
определяет внешний вид посещенных ссылок, т.е. ссылок по которым пользователь уже щелкнул. По умолчанию такие ссылки меняют свой цвет на фиолетовый, но с помощью данного псевдокласса цвет и другие параметры можно поменять.
Псевдокласс :active
применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.
Псевдокласс :focus
применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.
И последний псевдокласс :hover
применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.
Для примера посмотрим как будут выглядеть ссылки в разных состояниях:
Псевдоклассы
И результат:
Псевдоклассы структуры документа
С помощью этой группы псевдоклассов стили привязываются к элементам в зависимости от их положения в структуре документа.
Первыми рассмотрим псевдоклассы :first-child
и :last-child
, которые привязывают стиль к элементам селектора, которые являются соответственно первым и последним дочерним элементом своего родителя. Чтобы стало понятней рассмотрим эти псевдоклассы на примере :
...
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Результат примера:
В этом примере с помощью правила CSS «li:first-child»
мы говорим браузеру, что стиль необходимо применить к элементу li
, который идет первым в своем родительском элементе. А с помощью селектора «li:last-child»
элемент должен быть последним. Таким образом, с помощью , мы указали, что первый элемент списка должен быть выделен жирным шрифтом, а у последнего элемента установили шрифт красного цвета.
Следующий псевдокласс :o
nly-of-type
, который применяется к дочернему элементу указанного типа, только если он единственный у своего родителя.
Например:
...
Результат:
В примере псевдокласс: only-of-type применяется к элементу , в правилах стиля которого размер шрифта увеличивается в два раза. Размер шрифта увеличивается только у тех гиперссылок, которые у своих родителей (в данном случае это тег
) встречаются только один раз.
Псевдокласс позволяет привязать стиль к элементам Web-страницы, на основе их нумерации в дереве элементов:
<основной селектор>:nth-child(odd | even | <число> | <выражение>) {стиль}
После имени данного псевдокласса в скобках может быть указано четыре возможных варианта:
odd
— стиль будет привязан ко всем нечетным элементам удовлетворяющих значению <основной селектор>
;
even
— означает все четные элементы;
число
— обозначает порядковый номер дочернего элемента относительно своего родителя (нумерация начинается с 1 — обозначает первый элемент);
выражение
— задается в виде формулы an+b,
где a
и b
целые числа, а n
счетчик, который принимает значения 0, 1, 2...
Например, как выделить все четные строки таблицы цветом?
В этом случае идеально поможет псевдокласс:nth-child:
...
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5
Ячейка 6
Ячейка 7
Ячейка 8
Ячейка 9
Ячейка 10
Ячейка 11
Ячейка 12
Ячейка 13
Ячейка 14
Ячейка 15
Ячейка 16
Ячейка 17
Ячейка 18
Результат:
В коде примера запись tr:nth-child (2n)
означает, что стиль необходимо привязать ко всем элементам tr,
с помощью которых формируются строки таблицы (об этом мы говорили в статье ). Причем порядковый номер строк относительно родительского элемента table
должен удовлетворять формуле 2n,
в которую браузер вместо n
подставляет целые числа 0, 1, 2... В итоге получается, что стиль применяется к строкам под номерами 2, 4, 6 и т.д.
Псевдоклассы:not и *
Осталось рассмотреть еще два важных псевдокласса. Особый псевдокласс:not позволяет привязать стиль к любому элементу web страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:
Стиль будет привязан к элементам веб страницы, удовлетворяющим основному селектору
и не удовлетворяющему селектору выбора
. Например:
H1:not(#main){color:red;}
В результате этого css правила, текст всех окрасятся в красный цвет, кроме того у которого атрибут id
будет равен main
.
И последний на сегодня псевдокласс * («звездочка»), который обозначает любой элемент html страницы. Он может потребоваться в случае, если необходимо установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. Синтаксис:
* { Описание правил стиля }
Например, чтобы установить размер текста для всех элементов документа можно использовать следующее правило css:
На этом все, до новых встреч на страницах блога!
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет
в исходном коде текста.
Синтаксис использования псевдоэлементов следующий.
Селектор:Псевдоэлемент { Описание правил стиля }
Вначале следует имя селектора, затем пишется двоеточие, после которого идёт
имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору,
если требуется установить сразу несколько псевдоэлементов для одного селектора,
правила стиля должны добавляться к ним по отдельности, как показано ниже.
Foo:first-letter { color: red }
.foo:first-line {font-style: italic}
Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных
или глобальных стилей.
:after
Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент
работает совместно со стилевым свойством content
,
которое определяет содержимое для вставки. В примере 16.1 показано использование
псевдоэлемента :after
для добавления текста в конец
абзаца.
Пример 16.1. Применение:after
HTML5
CSS 2.1
IE 7
IE 8+
Cr
Op
Sa
Fx
Псевдоэлементы
Ловля льва в пустыне с помощью метода золотого сечения.
Метод ловли льва простым перебором.
Результат примера показан на рис. 16.1.
Рис. 16.1. Добавление текста к абзацу с помощью:after
В данном примере к содержимому абзаца с классом new
добавляется дополнительное слово, которое выступает значением свойства content
.
Псевдоэлементы :after
и :before
,
а также стилевое свойство content
не поддерживаются
браузером Internet Explorer до седьмой версии включительно.
:before
По своему действию :before
аналогичен псевдоэлементу :after
, но вставляет контент до содержимого элемента. В примере 16.2
показано добавление маркеров своего типа к элементам списка посредством скрытия
стандартных маркеров и применения псевдоэлемента :before
.
Пример 16.2. Использование:before
HTML5
CSS 2.1
IE 7
IE 8+
Cr
Op
Sa
Fx 4
Псевдоэлементы
Чебурашка
Крокодил Гена
Шапокляк
Крыса Лариса
Результат примера показан ниже (рис. 16.2).
Рис. 16.2. Изменение вида маркеров с помощью:before
В данном примере псевдоэлемент :before
устанавливается
для селектора LI
, определяющего элементы списка. Добавление
желаемых символов происходит путём задания значения свойства content
.
Обратите внимание, что в качестве аргумента не обязательно выступает текст,
могут применяться также символы юникода.
И :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
Определяет стиль первой строки блочного текста. Длина этой строки зависит от
многих факторов, таких как используемый шрифт, размер окна браузера, ширина
блока, языка и т.д.
К псевдоэлементу :first-line
могут
применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся
к шрифту, изменению цвет текста и фона, а также: clear
, line-height
, letter-spacing
, text-decoration
, text-transform
, vertical-align
и word-spacing
.
В примере 16.4 показано использование псевдоэлемента :first-line
применительно к абзацу текста.
Пример 16.4. Выделение первой строки текста
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Псевдоэлементы
Интересно, а существует ли способ действительно практичного применения
свойства first-line? Нет, не такого, чтобы можно было бы показать, что это
возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от
скрытых перспектив, после чего остается только сказать себе, что вот это вот, это
самое сделать по-другому, также изящно и эффектно просто невозможно.
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента:first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием.
Обратите внимание, что при изменении ширины окна браузера, стиль первой строки
остается постоянным, независимо от числа входящих в нее слов.
Вопросы для проверки
1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
:after
:before
:first-line
:first-text
:first-letter
2. Что делает следующий стиль?
OL LI:first-letter {
color: red;
}
Изменяет цвет первой буквы элемента маркированного списка.
Изменяет цвет первой буквы элемента нумерованного списка.
Изменяет цвет первой строки в маркированном списке.
Изменяет цвет первой строки в нумерованном списке.
Изменяет цвет текста всего списка.
3. Какой селектор написан с ошибкой?
p.new:before
abbr:first-line
p.new.back:after
div:before:first-letter
a:hover:before
Ответы
2. Изменяет цвет первой буквы элемента нумерованного списка.
Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент::first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдо-элементы начинаются с двойного двоеточия - "::
":
P::first-letter { font-size: 120%; }
Двойное двоеточие было введено в CSS3 для визуального различия псевдо-классов и псевдо-элементов. Однако, псевдо-элементы, которые были добавлены еще в CSS2 (такие как: first-letter, first-line, before и after), могут быть записаны и с одним двоеточием, такой синтаксис использовался до появления спецификации CSS3 и поддерживается всеми браузерами. Синтаксис с двойным двоеточием поддерживается только в новых версиях браузеров и в обязательном порядке должен применяться только к псевдо-элементу::selection, который был добавлен в CSS3.
Примечание:
каждый селектор может содержать только один псевдо-элемент, который должен быть определен в самом конце селектора:
#header .menu span::first-letter { color: green; }
Псевдо-элемент::first-letter
Псевдо-элемент::first-letter позволяет применить стиль к первой букве в тексте родительского элемента. Например, для стилизации первой буквы в абзаце нам бы пришлось заключить ее в элемент и применить стиль к нему:
Название документа
Наш текст
Попробовать »
Или мы можем стилизовать первую букву в тексте с помощью псевдо-элемента::first-letter, в этом случае нам не придется добавлять лишний элемент в HTML-разметку:
Название документа
Наш текст
Попробовать »
Псевдо-элемент::first-line
Псевдо-элемент::first-line применяет стиль к первой строке текста в элементе:
Особенность псевдо-элемента::first-line состоит в том, что он будет стилизовать только первую строку, ширина которой будет зависеть от ширины элемента, то есть на более маленьких экранах или при уменьшении окна браузера будет меняться и ширина первой строки, но ее оформление будет оставаться неизменным.
Псевдо-элементы::before и::after
Для добавления генерируемого содержимого в документ используются псевдо-элементы::before и::after. С их помощью можно разместить генерируемое содержимое до и после содержимого в указанном элементе. Для определения содержимого, которое будет добавлено, используется CSS свойство content.
Допустим, у нас есть достаточно большой по объему текст, он содержит ссылки, но по оформлению они практически никак не отличаются от остального текста. И нам нужно перед каждой ссылкой поместить небольшую иконку, которая будет указывать пользователям, что это ссылка:
Селекторы атрибутов поддерживаются всеми современными браузерами (исключение составляет IE6, хотя его уже нельзя отнести к современным браузерам, стоит учитывать тот факт, что некоторые пользователи все еще его используют. Поэтому, если вам необходимо написать код, одинаково хорошо работающий во всех браузерах, включая IE6, то советуем вам воздержаться от использования селекторов атрибутов).
Селекторы атрибутов позволяют выбрать определенный элемент без использования идентификатора или класса. Для обращения к элементу, нужно всего лишь знать, содержит ли нужный элемент определенный атрибут:
Img { border: 1px solid red; }
В примере, приведенном выше, правило будет применяться ко всем элементам , имеющим атрибут alt. Но помимо простой выборки элементов по атрибутам, селекторы атрибутов позволяют выбирать элементы исходя из значения атрибута:
элемент[атрибут^="значение"]
^=
означает "начинается с...".
элемент[атрибут$="значение"]
- селектор атрибута с совпадением по подстроке. Оператор $=
означает "заканчивается на...".
элемент[атрибут*="значение"]
- селектор атрибута с совпадением по подстроке. Оператор *=
означает "содержит подстроку...".
В качестве примера приведем оформление ссылок, ссылающихся на внешний ресурс, электронный адрес и файл с расширением.pdf:
A {
padding-left: 20px;
background-image: url("img1.png");
background-repeat: no-repeat;
}
a {
padding-left: 20px;
background-image: url("img2.png");
background-repeat: no-repeat;
}
a {
padding-left: 20px;
background-image: url("img3.png");
background-repeat: no-repeat;
}
Попробовать »
В подобных ситуациях селекторы атрибутов полезно использовать для внесения привлекательных дополнений в дизайн ваших веб-страниц.
