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

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

Для таких ситуаций в css есть псевдоклассы и псевдоэлементы.

Стилизация ссылок

Для стилизации ссылок, в CSS есть четыре псевдокласса, в зависимости от взаимодействия с ссылкой:

  • a:link – псевдокласс непосещенной ссылки.
  • a:visited – псевдокласс для посещенной ссылки, т.е. ссылка по которой посетитель уже переходил и она сохранилась в кеше браузера.
  • a:hover – данные псевдокласс срабатывает при наведении указателя мыши на ссылку. Но hover работает не только с тегом ссылки <a>, его можно применять к любому тегу html. Только после применения обязательно тестируйте работу. Вы можете применить его к абзацу, при наведении мыши на абзац, измениться размер шрифта или цвета. Все что угодно.
  • a:active – данный псевдокласс срабатывает когда посетитель нажимает на ссылку. Т.е. в момент нажатия на ссылку можно задать какие либо визуальные эффекты.

Стилизация фрагментов абзаца

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

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

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

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

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

:before – уникальный псевдоэлемент, который добавляет текст или изображения перед нужным вам тегом. К примеру вам нужно перед первым абзацем выводить текст ВНИМАНИЕ!, но у вас уже много страниц и делать правки в коде вы не хотите. Вам на помощь псевдоэлемент :before.

Далее первому абзацу присваиваете класс first или если у абзаца уже есть класс, просто добавьте в таблице стилей css новый стиль с псевдоэлементом :before.

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

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

:first-child – данный псевдоэлемент позволяет стилизировать первый дочерний элемент. К примеру у тега <ul> может быть сколько угодно дочерних <li>, а с помощью :first-child, вы сможете задать форматирования именно для первого, не прописывая дополнительный код на странице.

Все первые дочерние элементы в теге <li> будут выделяться жирным.

:focus – этот псевдоэлемент задает фокусировку на конкретном элементе. Чаще всего он применяется для полей ввода информации. Когда вы нажимаете кнопкой мыши на поле для ввода данных или перемещаетесь на него по средствам табуляции, элемент находится в фокусе и его можно стилизировать этим псевдоклассом.

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

Надеюсь вам пригодиться данный материал.

Псевдоклассы и псевдоэлементы в CSS Владимир Полковниченко Основы CSS,
Что такое псевдоклассы и псевдоэлементы CSS? Иногда бывают ситуации, когда нужно выбрать элементы в коде, которые не имеют тэгов, но в то же время их очень просто идентифицировать. К примеру, вам нужно как то выделить ссылку при наведении, изменить первый абзац каждой статьи или заглавную букву в абзаце. Для таких ситуаций...
<h2>Что такое псевдоклассы и псевдоэлементы CSS?</h2> Иногда бывают ситуации, когда нужно выбрать элементы в коде, которые не имеют тэгов, но в то же время их очень просто идентифицировать. К примеру, вам нужно как то выделить ссылку при наведении, изменить первый абзац каждой статьи или заглавную букву в абзаце. Для таких ситуаций в css есть <strong>псевдоклассы и псевдоэлементы</strong>. <h2>Стилизация ссылок</h2> Для стилизации ссылок, в CSS есть четыре псевдокласса, в зависимости от взаимодействия с ссылкой: <ul> <li><strong>a:link</strong> - псевдокласс непосещенной ссылки.</li> <li><strong>a:visited</strong> - псевдокласс для посещенной ссылки, т.е. ссылка по которой посетитель уже переходил и она сохранилась в кеше браузера.</li> <li><strong>a:hover</strong> - данные псевдокласс срабатывает при наведении указателя мыши на ссылку. Но hover работает не только с тегом ссылки <a>, его можно применять к любому тегу html. Только после применения обязательно тестируйте работу. Вы можете применить его к абзацу, при наведении мыши на абзац, измениться размер шрифта или цвета. Все что угодно.</li> <li><strong>a:active</strong> - данный псевдокласс срабатывает когда посетитель нажимает на ссылку. Т.е. в момент нажатия на ссылку можно задать какие либо визуальные эффекты.</li> </ul> <h2>Стилизация фрагментов абзаца</h2> Как я писал выше, в CSS есть псевдоэлементы для стилизации первой строки абзаца или заглавной буквы. Псевдоэлемент <strong>:first-letter</strong> - позволяет изменить применить определенные стили к первой букве абзаца. К примеру увеличить размер, шрифт и цвет. Как в старых книгах или газетах. Интересная возможность для дизайнеров. Псевдоэлемент  <strong>:first-line</strong> - позволяет стилизировать первую строку абзаца. <h2>Дополнительные псевдоклассы и псевдоэлементы</h2> Сейчас я покажу несколько интересных дополнительных псевдоэлементов и псевдоклассов, которые могут оказаться весьма полезными для вас: <strong>:before</strong> - уникальный псевдоэлемент, который добавляет текст или изображения перед нужным вам тегом. К примеру вам нужно перед первым абзацем выводить текст ВНИМАНИЕ!, но у вас уже много страниц и делать правки в коде вы не хотите. Вам на помощь псевдоэлемент :before. [crayon-56611e8995e1d170135900/] Далее первому абзацу присваиваете класс first или если у абзаца уже есть класс, просто добавьте в <a title="Внешние и внутренние таблицы стилей CSS. Создаем и подключаем!" href="/css/obuchenie-css/osnovy-css/vneshnie-i-vnutrennie-tablicy-stilej-css-sozdaem-i-podklyuchaem.html" target="_blank">таблице стилей css</a> новый стиль с псевдоэлементом :before. Помните, контент сгенерированный псевдоэлементом :before не будет отображаться в исходном коде страницы и не будет заметен поисковых системам, что делает его бесполезным в плане <a title="SEO" href="/category/seo" target="_blank">SEO</a>. <strong>:after</strong> - то же самое действие что и :before, только этот псевдоэлемент добавляет сгенерированный контент после стилизируемого тега. <strong>:first-child</strong> - данный псевдоэлемент позволяет стилизировать первый дочерний элемент. К примеру у тега <ul> может быть сколько угодно дочерних <li>, а с помощью :first-child, вы сможете задать форматирования именно для первого, не прописывая дополнительный код на странице. [crayon-56611e8995e2c043546986/] Все первые дочерние элементы в теге <li> будут выделяться жирным. <strong>:focus</strong> - этот псевдоэлемент задает фокусировку на конкретном элементе. Чаще всего он применяется для полей ввода информации. Когда вы нажимаете кнопкой мыши на поле для ввода данных или перемещаетесь на него по средствам табуляции, элемент находится в фокусе и его можно стилизировать этим псевдоклассом. Как только пользователь переключается на другой элемент, стилизация :focus исчезает. Удобно использовать для полей форм, это как бы создает обратную связь с посетителем. Надеюсь вам пригодиться данный материал.