Псевдоэлементы и псевдоклассы

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

Псевдоэлементы:

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

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

• ::before и ::after: псевдоэлементы, которые добавляют контент до и после содержимого элемента. Например, для создания кавычек вокруг цитат.

.quote::before {
    content: "\201C"; /* Левая кавычка */
}

.quote::after {
    content: "\201D"; /* Правая кавычка */
}

• ::first-line и ::first-letter: псевдоэлементы, которые позволяют стилизовать первую строку или первую букву текста.

.first-line::first-line {
    font-weight: bold;
}

.first-letter::first-letter {
    font-size: 2em;
}

Псевдоклассы:

Псевдоклассы выбирают элементы на основе их состояния, позиции или взаимодействия с пользователем. Например, вы можете использовать псевдоклассы для стилизации ссылок при наведении или активации.

Примеры псевдоклассов:

• :hover: Выбирает элемент при наведении курсора на него. Используется часто для стилизации ссылок.

a:hover {
    color: red;
}

• :active: Выбирает элемент, когда он активирован, например, при нажатии на кнопку.

.button:active {
    background-color: green;
}

• :nth-child(): Позволяет выбрать элементы на основе их порядкового номера в родительском элементе. Например, можно выбрать каждый второй элемент.

ul li:nth-child(2n) {
    background-color: lightgray;
}

• :focus: Выбирает элемент, когда он получает фокус, например, при нажатии на текстовое поле ввода.

input:focus {
    border: 2px solid blue;
}

Это всего лишь несколько примеров псевдоэлементов и псевдоклассов в CSS. Они предоставляют множество возможностей для точной настройки стилей элементов в зависимости от их состояния и позиции.