Как сделать псевдоэлемент css

Обновлено: 04.07.2024

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

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

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

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

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

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

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

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

Схема родственных связей 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 .

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

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

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

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

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

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

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

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

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

В записанном стиле сказано, что обычные, непосещённые ссылки должны быть красного цвета a:link , ссылка при наведении должна менять цвет на другой a:hover , а посещённая ссылка должна иметь третий цвет a: visited .

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

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

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

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

Выводы

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

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

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

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

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

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

Но ситуация значительно улучшилась после снятия со счетов IE6 , и единственным оставшимся ограничением в использовании псевдоэлементов является седьмая версия этого браузера — IE7 , которая, надеемся, также вскоре будет упразднена.

Псевдоэлементы спецификации CSS 2.1.

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

Цель их применения вполне очевидна. Ниже приведены соответствующие примеры:

Первый пример позволяет увеличить размер первого символа элемента параграфа

до 120% , в то время, как использование второго подразумевает увеличение шрифта первой строки того же параграфа на те же 120% . Эти приемы, действительно, достойны внимания и позволяют придать дизайну страницы черты типографического оформления ( *Буквица, авторская информация и т.д. ).

Последние два псевдоэлемента первого релиза (спецификация CSS 2.1) – это :before и :after . А жизненно важным компонентом этих псевдоэлементов является декларация content . Примеры их использования:

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

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

Ощутить весь потенциал псевдоэлементов :before и after можно лишь в процессе их использования на практике. Но имейте ввиду, что они не поддерживаются в IE6 и IE7 .

Псевдоэлементы спецификации CSS 3.0.

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

CSS 2.1 CSS 3.0
:after ::after
:before ::before
:first-letter ::first-letter
:first-line ::first-line

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

Помимо измененного синтаксиса, в CSS 3.0 введены пять новых псевдоэлементов:

Давайте рассмотрим их подробнее.

Когда пользователь с помощью курсора выделяет в окне браузера фрагмент текста (допустим, с целью копирования в буфер обмена), то выделенная таким образом область текста оформляется при помощи встроенных в браузере CSS стилей, применяемых по умолчанию. Как правило, это светлый текст на темном фоне. Для переопределения дефолтных стилей в данном случае и предназначен псевдоэлемент ::selection . Вот примеры его использования:

::-moz-selection background-color: red;
color: yellow;
>

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

Помимо этого, при помощи псевдокласса ::selection можно изменять вид курсора и выделение контура для выбранного фрагмента текста. ( *На момент перевода статьи ни один современный браузер не отреагировал на установленные в CSS правиле свойства cursor и outline , с псевдоэлементом ::selection . Возможно в будущем такая поддержка будет реализована. )

::value /::choices /::repeat-item /::repeat

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

XForms предусматривает использование специальных плагинов для браузеров, которые были запланированы для нового стандарта — языка XHTML 2.0 , так и не вышедшего в свет.

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

Это один из уроков курса по верстке веб-сайтов HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровне, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.

Только на сайте FructCode вы можете найти актуальных версии моих курсов!

Содержание

Что такое псевдоклассы (pseudo classes)

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

Если вы еще не знакомы с понятием CSS-селектор (css selector) и не знаете, что такое CSS-селекторы (css selectors), прочитайте об этом статью или посмотрите видеоурок из курса HTML/CSS Advanced, а для закрепления ваших знаний, пройдите интерактивные упражнения.

Псевдоклассы задаются через двоеточие “:”, далее идет название псевдокласса, например, так задается псевдокласс :hover для HTML-тега : a:hover .

Смотрите видео "Что такое псевдоклассы(pseudo classes) и псевдоэлементы(pseudo elements)"

Подпишитесь на YouTube канал FructCode, чтобы не пропустить полезные видео!

Псевдокласс :hover

Посмотрите на этот пример. Наведите курсор мыши на ссылку Link и вы увидите, что цвет ссылки, при наведении на него курсора мыши, изменился на цвет “brown”:

Псевдокласс :active

Посмотрите пример ниже. Наведите курсор мыши на надпись Link, затем нажмите левой кнопкой мыши на надпись Link и не отпускайте кнопку мыши. Вы увидите, что ссылка в момент клика мышью стала зеленого цвета:

Псевдокласс :focus

, и других при установке курсора мыши в этот элемент.

Посмотрите пример ниже с HTML-формой. Если вы установите курсор мыши в поле , фоновый цвет поля изменится:

Псевдоклассы :first-child и :last-child

С помощью псевдокласса :first-child вы можете задавать стили для первого HTML-элемента, который является первым у своего родителя (parent).

    ), которые используются в этих примерах или что такое нумерованные списки (html теги ), посмотрите этот видеоурок из курса HTML/CSS Advanced.

Как я говорил ранее, для того, чтобы применялись стили к HTML-элементу, заданных с помощью псевдоклассов :first-child и :last-child, у элемента должен быть родитель (parent). Если родитель отсутствует, тогда стили не сработают.

и стили с :first-child работают, а для без родительского тега :first-child и :last-child не будут работать:

Обратите внимание, что в текущей спецификации Selectors Level 3, при использовании псевдоклассов :first-child и :last-child элемент должен иметь родителя (parent), чтобы сработали css-стили. В новой разрабатываемой версии спецификации Selectors Level 4 для срабатывания стилей заданных с помощью :first-child, :last-child, элемент может не иметь родителя.

Псевдоклассы :first-of-type и :last-of-type

С помощью псевдоклассов :first-of-type и :last-of-type можно задавать стили для первого и последнего потомка (child) соответсвенно своего типа среди детей (child) его родителя (parent).

Определение звучит сложно и не очень понятно. Поэтому лучше сразу перейти к примерам, чтобы вы быстро поняли как работают псевдоклассы :first-of-type и :last-of-type.

Точно такой же результат вы можете получить и с помощью псевдокласса :first-child, но не сможете выделить все последние элементы маркированного списка с надписью Third во всех вложенностях с помощью :last-child, зато такой результат вы сможете получить с помощью псевдокласса :last-of-type:

Псевдокласс :nth-child

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

Звучит сложно и непонятно, согласен. Но не будем отчаиваться и очень быстро все поймем на примерах ниже.

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

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

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

Синтаксис

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

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

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

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

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

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

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

Пример

Примечание: Псевдо-элемент ::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 псевдо-элемент используется для добавления специального стиля к первой букве текста.

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

Пример

Примечание: Псевдо-элемент ::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:

Пример

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

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

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

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

Пример

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

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

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

Пример

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

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

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

Пример

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

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

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

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

Читайте также: