popov . dev

Главная

Библиотека

Статьи

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

Разница между : и :: в 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 заключается в их использовании и назначении. Двоеточие : используется для выбора псевдоклассов, которые позволяют нам настраивать элементы на основе условий или состояний, таких как взаимодействие с пользователем или информация о браузере. С другой стороны, двойное двоеточие :: используется для выбора псевдоэлементов, которые позволяют нам создавать дополнительные элементы внутри элемента или специфичные для стиля части содержимого или структуры элемента.

Комментарии

Для того чтобы оставить свое мнение, необходимо зарегистрироваться на сайте