Псевдокласс позволяет привязать стиль к элементам Web-страницы, на основе их нумерации в дереве элементов:

<основной селектор>:nth-child(odd | even | <число> | <выражение>) {стиль}

После имени данного псевдокласса в скобках может быть указано четыре возможных варианта:

• odd — стиль будет привязан ко всем нечетным элементам удовлетворяющих значению <основной селектор> ;
• even — означает все четные элементы;
• число — обозначает порядковый номер дочернего элемента относительно своего родителя (нумерация начинается с 1 — обозначает первый элемент);
• выражение — задается в виде формулы an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2...

Например, как выделить все четные строки таблицы цветом? В этом случае идеально поможет псевдокласс:nth-child:

...

Результат:

В коде примера запись tr:nth-child (2n) означает, что стиль необходимо привязать ко всем элементам tr, с помощью которых формируются строки таблицы (об этом мы говорили в статье ). Причем порядковый номер строк относительно родительского элемента table должен удовлетворять формуле 2n, в которую браузер вместо n подставляет целые числа 0, 1, 2... В итоге получается, что стиль применяется к строкам под номерами 2, 4, 6 и т.д.

Псевдоклассы:not и *

Осталось рассмотреть еще два важных псевдокласса. Особый псевдокласс:not позволяет привязать стиль к любому элементу web страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:

<основной селектор>:not(<селектор выбора>) { <стиль> }

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

H1:not(#main){color:red;}

В результате этого css правила, текст всех окрасятся в красный цвет, кроме того у которого атрибут id будет равен main .

И последний на сегодня псевдокласс * («звездочка»), который обозначает любой элемент html страницы. Он может потребоваться в случае, если необходимо установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. Синтаксис:

* { Описание правил стиля }

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

На этом все, до новых встреч на страницах блога!

Что такое псевдо-элементы?

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

Например, он может быть использован для:

• Стиль первой буквы или строки элемента
• Вставка содержимого до или после содержимого элемента

Синтаксис

Синтаксис псевдо-элементов:

selector::pseudo-element {
property:value;
}

Обратите внимание на двойную нотацию двоеточия- ::first-line Против:first-line

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

Синтаксис с одним двоеточием использовался как для псевдо-классов, так и для псевдо-элементов в CSS2 и CSS1.

Для обратной совместимости синтаксис с одним двоеточием приемлем для CSS2 и CSS1 псевдо-элементов.

Псевдо-элемент:: первая строка

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

В следующем примере форматируется первая строка текста во всех

Элементах:

Пример

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

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

Следующие свойства применяются к::first-line псевдо-элементу:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Псевдо-элемент:: первая буква

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

В следующем примере форматируется первая буква текста во всех

Элементах:

Пример

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

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

Следующие свойства применяются к:: первая буква псевдо-элемент:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

Псевдо-элементы и классы CSS

Псевдо-элементы можно комбинировать с классами CSS:

Пример

p.intro::first-letter {
color: #ff0000;
font-size:200%;
}

В приведенном выше примере будет отображаться первая буква абзацев с классом = "Intro", в красном и в большем размере.

Множественные псевдо-элементы

Также можно комбинировать несколько псевдо-элементов.

В следующем примере первая буква абзаца будет красной, в размер шрифта XX-Large. Остальная часть первой линии будет синей, а в капители. Остальная часть абзаца будет размер шрифта по умолчанию и цвет:

Пример

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

P::first-line {
color: #0000ff;
font-variant: small-caps;
}

CSS-:: перед псевдо-элемент

Псевдо-элемент::before может использоваться для вставки некоторого содержимого перед содержимым элемента.

В следующем примере изображение вставляется перед содержимым каждого элемента

:

Пример

h1::before {
content: url(smiley.gif);
}

CSS-The:: после псевдо-элемент

Псевдо-элемент::after может использоваться для вставки некоторого содержимого после содержимого элемента.

В следующем примере изображение вставляется после содержимого каждого элемента

:

Пример

h1::after {
content: url(smiley.gif);
}

CSS-элемент:: выбор псевдо-элемента

Псевдо-элемент::selection совпадает с частью элемента, выбранного пользователем.

Следующие свойства CSS могут быть применены к::selection: color , background , cursor и outline .

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

Пример

::selection {
color: red;
background: yellow;
}

Все псевдо-элементы CSS

All CSS Pseudo Classes

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

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

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; }

Из скриншота можно заметить, что::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; }

Результат можно посмотреть ниже. Заметьте, что нам также нужно было настроить нижний 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; }

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

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

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

“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 ...

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

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

Псевдоэлемент::-ms-clear

Задаёт стиль кнопки для очистки текстового поля. Исходно эта кнопка не видна, она появляется в правой части поля только при вводе текста.

Псевдоэлемент::-ms-fill

Задаёт стиль индикатора прогресса в браузерах Internet Explorer и Edge. Само значение индикатора и его положение меняется динамически посредством скриптов.

Псевдоэлемент::-ms-reveal

Задаёт стиль кнопки для просмотра пароля в поле формы. Кнопка исходно не видна и появляется в правой части поля при вводе пароля.

Псевдоэлемент::-ms-tooltip

Применяет стилевые параметры к всплывающей подсказке слайдера, где отображается выбранное текущее значение, в Internet Explorer и Edge.

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

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

Псевдоэлемент::backdrop

Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.

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

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

В этом и заключается прелесть селекторов потомков – вы можете изменять стиль, пользуясь вложенностью тегов и их родственными связями. Те, кому пока еще трудно мысленно представить картину связей, могут взглянуть на вспомогательную схему ниже, где показана иерархия HTML-тегов:

Иерархия HTML-тегов: родственные связи

Глядя на схему, легко понять родственные связи тегов – можно сказать, здесь всё обстоит так же, как у людей 🙂 :

• предком называется тот тег, который включает в себя другие теги. В приведенной схеме html – это предок для head и body , а head , в свою очередь, является предком для title и script . Тег body – предок для h1 , h2 и p ;
• потомком называется тег, который расположен в одном или нескольких тегах. Например, теги head и body являются потомками тега html , title и script – потомки и для head , и для html , теги h1 , h2 и p – потомки и для body , и для html , а span – потомок для p , body и html ;
• родительским называется тот элемент, который находится на один уровень выше относительно другого. В схеме родителем является html по отношению к head и body . Тег head – родитель тегов title и script . Тег body – родитель для h1 , h2 и p . А тег p является родителем для span ;
• дочерним , соответственно, называется элемент, который находится под родительским элементом. Теги h1 , h2 , p – дочерние для body . Но при этом тег span является дочерним только для p ;
• сестринскими , или соседними называются элементы, у которых есть общий родитель. Вы наверняка уже догадались, что теги head и body – сестринские. Также соседними между собой являются теги h1 , h2 , p .

При создании селектора потомков сначала записывается название предка, а затем – название потомка. Рассматривая вышеприведенный пример с подчеркнутыми ссылками, мы могли бы записать селектор потомков несколькими способами:

Html body p a {}; body p a {}; p a {};

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

/*для классов*/ .blogcontent a { color: blue; } /*для идентификаторов*/ #mobilenav a { font-size: 12px; }

Псевдоклассы и псевдоэлементы

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

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

Популярные псевдоклассы CSS

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

• :link – этот псевдокласс задает стиль ссылкам, по которым пользователь еще не перешел;
• :visited – этот же, наоборот, применяет стиль к уже посещенным ссылкам;
• :hover – определяет стиль элемента, когда на него наведен курсор (может применяться не только к ссылкам);
• :active – задает стиль активной ссылке (то есть, в момент клика по ней);
• :focus – применяет стиль к элементу при фокусировке на нем (например, при установке курсора в строку поиска);
• :not() – этот полезный псевдокласс позволяет выбрать и стилизовать только те элементы, которые не содержат селектор, указанный в скобках.

Как записываются псевдоклассы CSS? Необходимо добавить стиль с названием необходимого элемента + имя псевдокласса. Пример:

A:link { color: red; } a:hover { color: #26A65B; } a:visited { color: #CCC; }

В записанном стиле сказано, что обычные, непосещённые ссылки должны быть красного цветаa:link {color: red;} , ссылка при наведении должна менять цвет на другойa:hover {color: #26A65B;} , а посещённая ссылка должна иметь третий цветa: visited {color: #CCC;} .

Популярные псевдоэлементы CSS

Если псевдоклассы записываются с одним двоеточием, то псевдоэлементы – с двумя. Это было внедрено в CSS3 для того, чтобы различать псевдоклассы и псевдоэлементы между собой. Однако раньше этой разницы не существовало и с псевдоэлементами использовалось одно двоеточие. Сейчас браузеры поддерживают оба варианта написания (но не для всех случаев). Рассмотрим некоторые псевдоэлементы:

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

Пример использования псевдоэлементов:

Blockquote::before { content: "«"; } blockquote::after { content: "»"; } blockquote::selection { color: #C8F7C5; background-color: #1E824C; }

Мы написали стиль для длинных цитат, который добавляет кавычки «ёлочки» в начале и в конце содержимого тега

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

Выводы

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

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

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

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