Как поставить фон страницы в html. Установка бесшовного фона в HTML. Время для практического занятия

В предыдущем разделе этой главы были рассмотрены четыре типа селекторов – селекторы тегов, классов, ID и групп. В этой части мы перейдем к селекторам потомков (которые также называются контекстными селекторами), а также познакомим вас с псевдоклассами и псевдоэлементами CSS.

Селекторы потомков

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

A { text-decoration: none; }

А что делать в том случае, когда нам нужны подчеркнутые ссылки, но только тогда, когда они находятся в теге

Мы могли бы создать отдельный класс и присваивать его нужным ссылкам, но это не совсем верный способ, который требует как дополнительных затрат по времени, так и места в HTML-коде. Гораздо легче использовать селекторы потомков (контекстные селекторы) и записать:

P a { text-decoration: underline; }

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

Должны быть подчеркнутыми. А на все остальные ссылки это правило не распространяется.

, а также изменяет цвет и фон выделенного пользователем текста цитаты.

Выводы

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

Благодаря селекторам потомков вам доступны гибкие и компактные настройки CSS-стилей.

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

С помощью псевдоэлементов в 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. Какой псевдоэлемент позволяет добавить текст в начало предложения?

1. :after
2. :before
3. :first-line
4. :first-text
5. :first-letter

2. Что делает следующий стиль?

OL LI:first-letter {
color: red;
}

1. Изменяет цвет первой буквы элемента маркированного списка.
2. Изменяет цвет первой буквы элемента нумерованного списка.
3. Изменяет цвет первой строки в маркированном списке.
4. Изменяет цвет первой строки в нумерованном списке.
5. Изменяет цвет текста всего списка.

3. Какой селектор написан с ошибкой?

1. p.new:before
2. abbr:first-line
3. p.new.back:after
4. div:before:first-letter
5. a:hover:before

Ответы

2. Изменяет цвет первой буквы элемента нумерованного списка.

Всем привет. В самом начале своей работы в веб-дизайне, я изучал все тяжелым способом: методом проб и ошибок. Тогда не было 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, не только к ссылкам. Вот он:

@mixin links ($link, $visited, $hover, $active) { & { color: $link; &:visited { color: $visited; } &:hover { color: $hover; } &:active, &:focus { color: $active; } } }

Использование:

A { @include links(orange, blue, yellow, teal); }

Скомпилированный результат:

A { color: orange; } a:visited { color: blue; } a:hover { color: yellow; } a:active, a:focus { color: teal; }

Структурные псевдоклассы

Структурные псевдоклассы направлены на дополнительные данные в дереве документа или 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 в списке.

Li:not(.first-item):not(:last-of-type) { background: yellow; color: black; }

:nth-child

Псевдокласс:nth-child выделяет один или более элементов в зависимости от их порядкового номера в разметке.

Это один из самых универсальных и надежных псевдоклассов в CSS.

Все псевдоклассы:nth принимают аргумент в виде формулы в скобках. Формула может быть просто целым числом, может структурироваться в виде an+b или использовать ключевое слово odd или even .

В формуле an+b:

• a это целое число;
• n это литерал (т.е. мы просто используем букву n внутри формулы);
• + это оператор (это может быть как + , так и -);
• b это целое число, используемое только при использовании оператора.

Вот список с греческим алфавитом, на базе которого мы сделаем несколько примеров:

1. Alpha
2. Beta
3. Gamma
4. Delta
5. Epsilon
6. Zeta
7. Theta
8. Iota
9. 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 ”, Ли Веру;
• “:nth Tester ”, CSS-Tricks

:only-child

Псевдокласс:only-child выбирает единственного потомка родительского элемента.

В следующем примере, в первом 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, который не считается контентом и поэтому у контейнера желтый фон.

This box is orange

div { background: orange; height: 30px; width: 200px; } div:empty { background: yellow; }

:enabled

Псевдокласс:enabled выбирает элементы, включенные для пользователя; по умолчанию все элементы формы включены, если в разметке им не задан атрибут disabled .

Мы можем использовать комбинацию:enabled и:disabled , чтобы обеспечить визуальную обратную связь, улучшая тем самым пользовательский опыт.

В следующем примере, ранее отключенное поле ввода name включено, к нему добавлена однопиксельная граница зеленого цвета и полная непрозрачность.

:enabled { opacity: 1; border: 1px solid green; }

Совет: использование в разметке enabled="enabled" не требуется, достаточно просто enabled ; исключением является только XHTML.

:in-range

Псевдокласс:in-range выбирает элементы, которым задан диапазон и значение, которых входит в этот диапазон.

В следующем примере поле ввода поддерживает диапазон между 5 и 10, все значения между ними вызовут измение цвета границы поля на зеленый.

input { border: 5px solid orange; } input:in-range { border: 5px solid green; }

:out-of-range

Псевдокласс:out-of-range выбирает элемент, у которого есть диапазон и значение которого не входит в этот диапазон

В следующем примере поле ввода поддерживает диапазон от 1 до 12 - для всех остальных значений будет задан оранжевый цвет границы поля.

input:out-of-range { border: 1px solid orange; }

:indeterminate

Псевдокласс:indeterminate выбирает элементы ввода типа радиокнопок и чекбоксов, которые не выделены или выделение которых снято после загрузки страницы.

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

• Option 1
• Option 2
• Option 3

: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!

:read-write:focus { padding: 5px; border: 1px dotted black; }

:required

Псевдокласс: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 . В будущем префикс, скорее всего, будет не нужен, поэтому в примерах селектор задан как с префиксом, так и без него.

Примечание: Сочетание префиксной и безпрефиксной версий в одном правиле не работает. Надо создавать два отдельных правила.

В следующем примере оранжевым цветом будет выделен параграф на арабском (как известно, текст в нем пишется справа налево).

التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.

/* prefixed */ article:-moz-dir(rtl) { color: orange; } /* unprefixed */ article:dir(rtl) { color: orange; }

В англоязычном параграфе (слева направо) текст будет синим.

If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.

/* prefixed */ article:-moz-dir(ltr) { color: blue; } /* unprefixed */ article:dir(ltr) { color: blue; }

:lang

Псевдокласс: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.

Trigger full screen! 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.

Trigger full screen! 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 .

Примечание: сочетание в одном правиле синтаксиса с префиксом и без префикса не работает, надо создавать два отдельных правила.

::-moz-selection { color: orange; background: #333; } ::selection { color: orange; background: #333; }

::placeholder (эксп.)

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

Его также можно указывать как::input-placeholder , этот синтаксис фактически и используется в CSS.

Примечание: этот элемент еще не является частью стандарта, с большой вероятностью его имплементация изменится в будущем, поэтому используйте его с осторожностью.

В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент::placeholder реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:

input::-moz-placeholder { color:#666; } input::-webkit-input-placeholder { color:#666; } /* IE 10 only */ input:-ms-input-placeholder { color:#666; } /* Firefox 18 and below */ input:-moz-input-placeholder { color:#666; }

Заключение

Итак, похоже, это все.

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

Тщательно тестируйте код. Хорошо реализованные псевдоклассы и псевдоэлементы должны пройти долгий путь.

От автора: спецификация CSS Pseudo-elements Module Level 4 проливает свет на поведение существующих псевдоэлементов и предоставляет новые. Тем не менее, только несколько из новых псевдоэлементов имеют хоть какую-то поддержку в последних версиях браузеров.

Сегодня мы поговорим о следующих псевдоэлементах:

::before — вставляет генерируемый контент перед контентом элемента

::after — вставляет генерируемый контент после контента элемента

::first-letter — выбирает первую букву элемента

::first-line — выбирает первую строку элемента

::selection — стилизует текст, выделенный курсором

Из них элементы::first–letter, ::first–line и::selection влияют на контент, который входит в исходники. Псевдоэлементы::before и::after, наоборот, вставляют контент в документ, которого нет в исходниках. Разберем поподробнее все псевдоэлементы.

Замечание: синтаксис с одним двоеточием

Вы могли видеть версии::first–letter, ::first–line, ::before и::after с одним двоеточием в старом CSS. В CSS2 эти псевдоэлементы задавались через одноразовое двоеточие:. IE8 требует синтаксис с одинарным двоеточием, хотя большая часть других браузеров поддерживает оба варианта. Лучше использовать синтаксис с двойным двоеточием.

Псевдоэлементы::before и::after

Большая часть псевдоэлементов позволяет выбирать контент, который уже присутствует в исходниках документа, но не задан с помощью языка (другими словами, ваш HTML). Однако::before и::after работают по-другому. Эти псевдоэлементы добавляют генерируемый контент в дерево документа. Созданный контент не существует в HTML исходниках, но он отображается.

Зачем использовать генерируемый контент? Например, можно помечать обязательные поля формы, добавляя контент после лейблов:

/* Применяется к лейблу, ассоциирующемуся с требуемым полем */ .required::after { content: " (Required) "; color: #c00; font-size: .8em; }

В нужном поле формы необходимо использовать HTML свойство required. Так как данная информация уже доступна в DOM, то::before и::after выступают в роли помощников. Это не критический контент, поэтому его можно и не вносить в исходники.

Замечание: генерируемый контент и доступность

Некоторые скрин ридеры и браузеры распознают и читают генерируемый контент, однако большая часть этого не умеет. Не используйте псевдоэлементы::before и::after для предоставления генерируемого контента для пользователей с ограниченными возможностями. Более подробно этот вопрос можно изучить в статье Leonie Watson «поддержка доступности для генерируемого CSS контента ».

Другой способ применения::before и::after – добавление префикса или суффикса в контент. Вышеупомянутая форма может использовать вспомогательный текст, как показано ниже:

Change Your Password

Enter a new password

Retype your password

Longer passwords are stronger.

Save changes

< form method = "post" action = "/save" > < fieldset > < legend > Change Your Password < / legend > < p > < label for = "password" > Enter a new password < / label > < input type = "password" id = "password" name = "password" > < / p > < p > < label for = "password2" > Retype your password < / label > < input type = "password" id = "password2" name = "password2" > < / p > < p class = "helptext" > Longer passwords are stronger . < / p > < p > < button type = "submit" > Save changes < / button > < / p > < / fieldset > < / form >

Заключим наш вспомогательный текст в парные скобки с помощью::before и::after.

Helptext::before { content: "("; } .helptext::after { content: ")"; }

Helptext :: before { content : "(" ; Helptext :: after { content : ")" ;

Результат.

Возможно, самый полезный способ применения::before и::after – очистка обтекаемых элементов. Nicolas Gallagher представил эту технику (которая основана на работе Thierry Koblentz) в своем посте «новый микро clearfix хак »:

/* Для поддержки IE <= 9 используйте:before и:after */ .clearfix::before, .clearfix::after { content: " "; /* Обратите внимание на пробел между кавычек. */ display: table; } .clearfix::after { clear: both; }

Добавьте класс clearfix к любому элементу, который необходимо очистить после обтекаемого элемента.

Псевдоклассы::before и::after ведут себя полностью, как дочерние элементы тега, за которым они закреплены. Они наследуют все возможные свойства родителя и расположены внутри блока родителя. Они также взаимодействуют с другими блоковыми элементами, как если бы они были настоящими тегами. Свойства display: block или display: table на::before и::after работают точно так же, как и на других элементах.

Предупреждение: один псевдоэлемент на селектор

На данный момент на один селектор разрешается применять только один псевдоэлемент. То есть запись типа p::first-line::before неправильная.

Создание типографических эффектов с помощью:first-letter

Псевдоэлементы::before и::after вставляют контент, а::first-letter работает с контентом, уже прописанном в исходниках. С его помощью можно создавать эффект первой буквы или буквицы, который вы могли видеть в журналах и книгах.

Замечание: первая буква и буквицы

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

Стили ниже добавляют первую заглавную букву во все параграфы p в документе:

p::first-letter { font-family: serif; font-weight: bold; font-size: 3em; font-style: italic; color: #3f51b5; }

p :: first - letter { font - family : serif ; font - weight : bold ; font - size : 3em ; font - style : italic ; color : #3f51b5;

Из скриншота можно заметить, что::first-letter изменяет line-height первой строки, если элементу было задано значение line-height без единиц измерения. В данном случае все теги p наследуют значение line-height 1.5 от тега body.

Существует три способа сгладить эту проблему:

уменьшить значение line-height для псевдоэлемента::first–letter, почти всегда подойдет значение.5;

задать line-height с единицами измерения для псевдоэлемента::first–letter;

задать line-height с единицами измерения для body или родителя::first–letter.

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

В нашем случае давайте уменьшим значение line-height для p::first-letter до.5 (и перепишем свойства в файле, будем использовать сокращенное свойство font):

p::first-letter { font: bold italic 3em / .5 serif; color: #3f51b5; }

p :: first - letter { color : #3f51b5;

Результат можно посмотреть ниже. Заметьте, что нам также нужно было настроить нижний margin каждого параграфа p, чтобы компенсировать уменьшенное значение line-height на p::first-letter.

Для создания буквиц понадобится чуть больше строк CSS. В отличие от первых заглавных букв, прилегающий текст к буквице обтекает ее. То есть нам нужно добавить float: left; в наши стили. Также мы добавим верхний, правый и нижний margin:

p::first-letter { font: bold italic 3em / .5 serif; font-style: italic; color: #607d8b; float: left; margin: 0.2em 0.25em .01em 0; }

p :: first - letter { font : bold italic 3em / . 5 serif ; font - style : italic ; color : #607d8b; float : left ; margin : 0.2em 0.25em . 01em 0 ;

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

Если вы не используете px или rem для установки размеров, margin и line-height, будет очень сложно идеально стилизовать::first-letter во всех браузерах.

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

“Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin vel mattis eget, ...

< p > & #8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit.” Fusce odio leo, sollicitudin vel mattis eget, ...

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

Тем не менее, результат будет отличаться, когда знак пунктуации генерируется элементом. Рассмотрим следующую разметку:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo, sollicitudin vel mattis eget, iaculis sit ...

< p > < q > Lorem ipsum dolor sit amet , consectetur adipiscing elit . < / q > Fusce odio leo , sollicitudin vel mattis eget , iaculis sit . . . < / p >

На данный момент браузеры отрисовывают тег q в виде кавычек, использующихся в определенном языке, которые будут открываться и закрываться. Однако не все браузеры одинаково распознают такие кавычки. В Firefox 42 (см. ниже), Safari 8 и более ранних версиях::first-letter изменяет только открывающую кавычку.

В Chrome, Opera и Yandex открывающая кавычка тега q и первая буква параграфа не стилизуются. Ниже показан скриншот в Chrome.

IE применяет стили как к открывающей кавычке, так и к первой букве параграфа. Смотрите ниже.

В спецификации CSS Pseudo-elements Module Level 4 говорится, что знак пунктуации, предшествующий или следующий сразу после первой буквы или символа должен стилизоваться. Однако в спецификации нет точного разъяснения насчет применения стилей к генерируемым знакам пунктуации.

Баги браузеров при использовании::first-letter

По большей части::first-letter работает во всех браузерах ровно так, как ожидаешь. Как и со всеми CSS свойствами, у данного псевдоэлемента есть парочка багов и случаев неправильного использования, о которых нужно знать.

В Firefox 39 и раньше некоторые символы заставляют Firefox игнорировать правило::first–letter: ‑,$,^,_,+,`,~,>,<.>

Это относится к случаям, когда первый символ задан через::before и свойство content, а также если он прописан в исходниках документа. Фикса этого бага нет. Если используете::first-letter, вам придется избегать этих символов в начале параграфа.

Замечание: баги в Blink браузерах

Некоторые версии Blink браузеров не применят правило::first–letter, если у родителя задано свойство display со значением inline или table. Баг есть в Chrome 42, Opera 29 и Yandex 15. Баг пофиксили в Chrome 44, однако релиз увидит свет не раньше, чем эта книга окажется у вас в руках. Самый простой способ обойти баг – добавить к родителю свойство display: inline-block, display: block или display: table-cell.

Создание типографических эффектов с помощью::first-line

Псевдокласс::first-line работает почти как::first-letter, только эффект распространяется на всю первую строку элемента. Можно, например, делать первую строку каждого параграфа больше и изменять цвет текста:

Можно принудительно поставить конец первой строки с помощью br или hr, как показано ниже. К сожалению, это не всегда работает. Если ваш элемент может вместить только 72 символа, то тег br после 80-го символа никак не повлияет на псевдоэлемент::first-line. Вы просто получите странный разрыв строки.

Точно так же и с неразрывным пробелом (), который вставляется, чтобы не разрывать слова между строк. Это никак не повлияет на::first-line. Слово, которое расположено перед будет принудительно перемещено на строку, где расположен текст после неразрывного пробела.

Генерируемый контент, добавленный через::before, будет отображаться на первой строке, как показано ниже.

Если генерируемый текст достаточно длинный, он полностью заполнит первую строку. Однако если добавить display: block (например, p::before {content: ‘!!!’; display: block;}), то контент займет всю первую строку целиком.

К сожалению, этот баг до сих пор есть в Firefox 40 и более ранних версиях. Firefox полностью игнорирует правило.

Забавные интерфейсы с помощью::selection

Псевдоэлемент::selection относится к так называемым «подсвечивающим» псевдоэлементам, прописанным в спецификации CSS Pseudo-Elements Module Level 4. Данный подсвечивающий псевдоэлемент ранее входил в спецификацию Selectors Level 3, единственный, поддерживающийся в браузерах.

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

С::selection можно использовать не все свойства. В спецификации прописаны только следующие свойства:

Помните о доступности при выборе цвета переднего фона и заднего фона для::selection. Некоторые комбинации цветов дают плохой контраст для слабо видящих людей. Другие комбинации могут быть неразборчивыми для дальтоников. Перед конечным выбором цветов используйте инструмент проверки контраста и симулятор дальтонизма.

В Pseudo-Elements Module также прописаны псевдоклассы::spelling-error и::grammar-error. Когда они будут реализованы, мы сможем стилизовать текст с ошибками, проверяемыми по словарю браузера.

В этой статье мы познакомимся с псевдоэлементами::first-line , ::first-letter , ::after , ::before и научимся их применять на практике.

Псевдоэлементы - это вид селекторов, которые могут задать стиль для элементов, которые явно не определены в структуре документа (::first-line , ::first-letter), а также добавлять контент до и после элементов с применением к нему стилей (::after , ::before).

Рассмотрим следующий код:

Lorem ipsum dolor sit amet. Omnis voluptas nulla vero eos et iusto odio dignissimos. A sapiente delectus, ut aliquid. Aliquid ex ea voluptate velit esse, quam nihil impedit, quo minus. Consequuntur magni dolores eos, qui ratione voluptatem. Nobis est et molestiae consequatur, vel. Delectus, ut aliquid ex ea voluptate velit esse. Suscipit laboriosam, nisi ut labore et dolorum. Provident, similique sunt in ea voluptate velit esse quam.

P::first-letter { font-size:200%; color: red; } p::first-line { font-weight:bold; color: blue; } p::before { content: "Начало. "; } p::after { content: " Конец"; font-weight:bold; color:green; }

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

Примечание: несмотря на то, что в стандарте CSS 3 для указания псевдоэлемента используется именно двойное двоеточие, иногда Вы можете увидеть в силу исторических причин одно двоеточие, которое использовалось для указания псевдоэлементов в стандарте CSS 2.1. Все современные браузеры позволяют использовать как одно двоеточие, так и два для указания того, что дальше следует псевдоэлемент. Единственный браузер, который не понимает знак двойного двоеточия, является Internet Explorer 8.

Псевдоэлемент::first-letter

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

HTML:

Содержимое

CSS: p::first-letter { font-size: 200%; color: red; }

Псевдоэлемент::first-line

Псевдокласс::first-line позволяет установить стиль для первой строки текста блочного элемента.

HTML:

Содержимое

CSS: p::first-line { font-style: italic; color: red; }

Псевдоэлементы::after и::before

Псевдоэлементы::after и::before предназначены для добавления контента с помощью CSS свойства content до и после содержимого элемента. Кроме свойства контент, Вы также можете добавить различные CSS свойства, которые будут применены к данному контенту, т.е. к контенту, который появляется до или после содержимого элемента.