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

Я потратил годы, гугля «разницу между : и :: в CSS», прежде чем информация осталась в моем мозгу. Звучит знакомо? Тогда этот пост для вас.

Во-первых: если вам нужен быстрый ответ на заголовок этой статьи, то ищите дальше!

А если вам нужно более подробное объяснение, то давайте погрузимся в некоторые примеры.

Что означает слово «псевдо»?

Английское определение слова pseudo — это «фальшивый» или «ненастоящий». Так что же мы имеем в виду под фальшивыми классами и фальшивыми элементами? Псевдоклассы и псевдоэлементы не записываются вручную в 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. Для доступа к псевдоэлементам используется двойное двоеточие (::), за которым следует селектор псевдоэлемента. В отличие от псевдоклассов, псевдоэлементы не могут быть использованы для стилизации элемента в зависимости от его состояния.

Вот пример. Часто сайты, основанные на статьях, используют «drop caps», традицию печати, существующую уже тысячи лет, которая использует очень большую одиночную букву для обозначения начала блока текста. Этого можно добиться, используя псевдоэлемент ::first-letter в CSS.

p::first-letter {
  font-size: 300%;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Вот наглядный пример, показывающий, как будут выглядеть заглавные буквы в записях моего блога.

Вы также можете выбрать целевое назначение первой строки элемента, используя селектор ::first-line.

p::first-line {
  font-size: 300%;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Другие распространенные селекторы псевдоэлементов, которые вы можете использовать в своих CSS-файлах, включают:

  • ::before
  • ::after
  • ::first-of-type
  • ::last-of-type
  • и ::placeholder.

Подробнее о различных типах псевдоэлементов, доступных для выбора в CSS, читайте в официальной документации MDN.

Вот и все! Пусть это будет последний раз, когда вы гуглите разницу между : и :: в CSS!

Оцените статью
devanswers.ru
Добавить комментарий