Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Я годами гуглила «чем отличается : от :: в CSS», прежде чем эта информация наконец осела у меня в голове. Звучит знакомо? Тогда эта статья для вас.
Если вы хотите быстро получить ответ на вопрос из заголовка статьи, то вот он:
- : относится к псевдоклассам, таким как :visited или :hover
- :: — для псевдоэлементов, таких как ::first-of-type или ::after
А если хотите более подробных объяснений, давайте рассмотрим примеры.
Что означает «псевдо»?
Приставка «псевдо» указывает на то, что нечто является поддельным, ненастоящим. Но как могут быть поддельными классы или элементы? Псевдоклассы и псевдоэлементы не прописаны в HTML вручную и не появляются в DOM (или дереве документа). Их создает CSS!
Что такое псевдокласс?
Псевдоклассы позволяют вам выбирать элементы в CSS, основываясь на информации не из HTML страницы. Например, на информации, хранящейся в браузере. Доступ к псевдоклассам осуществляется при помощи одного двоеточия, за которым идет имя псевдокласса.
Псевдоклассы можно использовать для стилизации элемента в привязке к его состоянию. Например, вы могли заметить, что ссылки, по которым вы уже переходили, отличаются цветом от тех, к которым вы еще не прикасались. Такой эффект достигается при помощи псевдокласса :visited якорного тега (a) в CSS.
a:visited { color: #c58af9; }
Это можно посмотреть в действии на примере движка Google. Зайдите на google.com и поищите что-нибудь такое, что вы точно уже искали. Откройте инструменты разработчика в браузере и найдите селектор a:visited в CSS.
Помимо информации браузера (например, о посещенных ссылках), псевдоклассы могут привязываться к действиям пользователя на странице. Например, к наведению курсора на элемент или попаданию элемента в фокус. Вот работа псевдокласса :hover на странице выдачи Google.
a:hover { text-decoration: underline; }
О различных видах псевдоклассов, доступных в CSS, можно почитать в обширной документации на MDN.
Что такое псевдоэлемент?
Селекторы псевдоэлементов позволяют использовать CSS для стилизации конкретной части элемента DOM. Доступ к псевдоэлементам осуществляется при помощи двойного двоеточия, за которым идет селектор псевдоэлемента.
В отличие от псевдоклассов псевдоэлементы нельзя использовать для стилизации элементов в привязке к их состоянию.
От редакции Techrocks. На тему псевдоэлементов у нас есть отдельная статья — «Псевдоэлементы в CSS: продвинутая стилизация».
Рассмотрим пример. Часто сайты со статьями используют в оформлении буквицы: первая буква обозначает начало блока текста и делается очень большой. Достичь такого эффекта можно при помощи псевдоэлемента ::first-letter.
p::first-letter { font-size: 300%; }
Вот пример того, как выглядит буквица в посте.
Также можно нацелиться на первую строку элемента — для этого используется селектор ::first-line.
p::first-line { font-size: 300%; }
Вот еще несколько распространенных селекторов псевдоэлементов, которые вы можете использовать в своих CSS-файлах:
- ::before
- ::after
- ::first-of-type
- ::last-of-type
- ::placeholder.
Почитать о разных видах доступных псевдоэлементов можно в официальной документации на MDN.
Вот и все! Возможно, это был последний раз, когда вам пришлось гуглить разницу между : и :: в CSS!
Перевод статьи «What’s the difference between : and :: in CSS?».
Запись В чем разница между : и :: в CSS? впервые появилась Techrocks.