В чем разница между : и :: в CSS?

Я годами гуглила «чем отличается : от :: в 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?».