verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

В чем разница между : и :: в 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.

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

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

a:hover {
  text-decoration: underline;
}
В чем разница между : и :: в CSS?

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

Что такое псевдоэлемент?

Селекторы псевдоэлементов позволяют использовать CSS для стилизации конкретной части элемента DOM. Доступ к псевдоэлементам осуществляется при помощи двойного двоеточия, за которым идет селектор псевдоэлемента.

В отличие от псевдоклассов псевдоэлементы нельзя использовать для стилизации элементов в привязке к их состоянию.

От редакции Techrocks. На тему псевдоэлементов у нас есть отдельная статья — «Псевдоэлементы в CSS: продвинутая стилизация».

Рассмотрим пример. Часто сайты со статьями используют в оформлении буквицы: первая буква обозначает начало блока текста и делается очень большой. Достичь такого эффекта можно при помощи псевдоэлемента ::first-letter.

p::first-letter {
  font-size: 300%;
}

Вот пример того, как выглядит буквица в посте.

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

Также можно нацелиться на первую строку элемента — для этого используется селектор ::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.

Похожие записи

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Наука о данных Разное Тренды

Go — единственный выбор для бэкенд-разработчика?

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Наука о данных Разное Тренды

Go — единственный выбор для бэкенд-разработчика?

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Наука о данных Разное Тренды

Производительность в Jetpack Compose: стабильность и неизменяемость