Разница между : и :: в CSS

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

Разбираемся с псевдоклассами :

Давайте начнем с изучения роли двоеточия : в CSS. Двоеточие в основном используется для выбора псевдоклассов. Но что такое псевдоклассы на самом деле?

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

Чтобы использовать псевдоклассы, мы добавляем их в конец CSS-селектора с помощью символа двоеточия :. Рассмотрим пример:

a:hover {
  color: red;
}

В приведенном выше фрагменте кода мы ориентируемся на элемент a (ссылку) и применяем к нему красный цвет, когда пользователь наводит на него курсор. Псевдокласс :hover представляет состояние, когда курсор мыши находится над элементом.

Другим часто используемым псевдоклассом является visited. Он позволяет нам стилизовать ссылки, которые были посещены пользователем. Пример посещенной ссылки:

a:visited {
  color: purple;
}

В приведенном выше коде селектор a:visited устанавливает цвет посещенных ссылок на фиолетовый. Это полезный способ указать пользователям, какие ссылки они уже посетили.

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

li:first-child {
  font-weight: bold;
}

В этом примере селектор li:first-child нацелен на первый элемент li в его родительском контейнере и применяет к нему жирный шрифт.

Чтобы ознакомиться со всем спектром псевдоклассов, доступных в CSS, вы можете обратиться к обширной документации на MDN.

Рассмотрим псевдоэлементы ::

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

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

Одним из часто используемых псевдоэлементов является ::before. Он позволяет нам вставлять содержимое перед содержимым элемента. Пример:

p::before {
  content: ">> ";
}

В приведенном выше фрагменте кода селектор p::before вставляет строку ">> " перед содержимым каждого элемента p. Этот прием может быть полезен для добавления декоративных или информационных элементов в ваш макет.

Аналогично, псевдоэлемент ::after вставляет содержимое после содержимого элемента. Вот пример:

p::after {
  content: " <<";
}

В этом случае селектор p::after добавляет строку " <<" после содержимого каждого элемента p.

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

Заключение

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