1.1 Псевдоклассы
Псевдоклассы в CSS — это специальные ключевые слова, которые добавляются к селекторам, чтобы указать их состояние или позицию в дереве документа. Они позволяют стилизовать элементы на основе их состояния или отношения к другим элементам без необходимости добавления классов или идентификаторов в HTML-код.
Основные концепции псевдоклассов
- Определение состояния элемента:
- Псевдоклассы могут указывать на состояние элемента, такое как наведение мыши, фокус или активация
- Определение позиции элемента:
- Псевдоклассы могут указывать на позицию элемента относительно его родителя или других элементов, таких как первый или последний элемент
- Специальные случаи и логические группы:
- Псевдоклассы могут также определять специальные случаи, такие как первый элемент типа или нечетный/четный элемент
Как использовать псевдоклассы
Псевдоклассы добавляются к селектору с использованием двоеточия (:). Они могут быть использованы как с элементными селекторами, так и с классами, идентификаторами и другими селекторами.
Синтаксис:
селектор:псевдокласс {
свойства: значения;
}
Примеры использования
1. Селектор элемента с псевдоклассом
В этом примере все первые абзацы (<p>
) внутри своих родительских элементов будут жирными:
p:first-of-type {
font-weight: bold;
}
2. Селектор класса с псевдоклассом
В этом примере фон всех элементов с классом .button
станет синим при наведении курсора мыши:
.button:hover {
background-color: blue;
}
3. Комбинированные селекторы с псевдоклассами
В этом примере все четные абзацы (<p>
) внутри элементов с классом .container
будут красными:
.container > p:nth-child(2n) {
color: red;
}
1.2 Примеры псевдоклассов и их применение
1. Псевдоклассы, определяющие состояние
Псевдоклассы, определяющие состояние элемента, позволяют изменять его стилизацию в зависимости от взаимодействия пользователя или состояния элемента.
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: green;
}
2. Псевдоклассы, определяющие позицию
Псевдоклассы, определяющие позицию элемента, позволяют применять стили к элементам в зависимости от их расположения в DOM-структуре.
li:first-child {
font-style: italic;
}
li:last-child {
font-style: italic;
}
li:nth-child(odd) {
background-color: #f0f0f0;
}
li:nth-child(even) {
background-color: #ffffff;
}
3. Псевдоклассы для логических групп
Эти псевдоклассы позволяют стилизовать элементы на основе их логических групп или типов.
input:checked {
background-color: yellow;
}
input:disabled {
background-color: grey;
}
input:enabled {
background-color: white;
}
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ