7.1 Псевдоклассы состояния
Псевдоклассы в CSS — это особые ключевые слова, которые добавляются к селекторам для указания состояния элемента или его положения в структуре документа. Они позволяют применять стили к элементам в определенных состояниях или ситуациях, которые невозможно указать с помощью обычных селекторов.
Основные псевдоклассы:
- Псевдоклассы состояния
- Псевдоклассы структурного состояния
- Псевдоклассы формы
- Псевдоклассы навигации
Синтаксис:
селектор:псевдокласс {
свойство: значение;
свойство: значение;
}
Псевдоклассы состояния
Эти псевдоклассы используются для стилизации элементов в зависимости от их текущего состояния, например, при наведении курсора или активном элементе:
:hover— применяется, когда пользователь наводит курсор на элемент:active— применяется, когда элемент активирован (обычно при нажатии):focus— применяется, когда элемент находится в фокусе (например, при использовании клавиатуры):visited— применяется к посещенным ссылкам:link— применяется к непосещенным ссылкам
7.2 Псевдокласс hover
Псевдокласс :hover применяется к элементу, когда пользователь наводит на него указатель мыши. Это часто используется для изменения внешнего вида ссылок и кнопок при наведении.
Синтаксис:
селектор:hover {
свойство: значение;
свойство: значение;
}
Пример:
Этот селектор изменяет цвет текста и подчеркивает ссылки при наведении указателя мыши.
<a href="#">Ссылка-заглушка</a>
a:hover {
color: red;
text-decoration: underline;
}
Применение:
- Улучшает взаимодействие с пользователем (UI) за счет визуальной обратной связи
- Используется для кнопок, ссылок и других интерактивных элементов
7.3 Псевдокласс focus
Псевдокласс :focus применяется к элементу, когда он получает фокус. Например, при нажатии на него или при переходе к нему с помощью клавиши табуляции. Чаще всего используется для инпутов и других формовых элементов.
Синтаксис:
селектор:focus {
свойство: значение;
свойство: значение;
}
Пример:
Этот селектор изменяет цвет границы инпута и убирает обводку при получении фокуса.
<input type="text" name="text" id="text">
input:focus {
border-color: blue;
outline: none;
}
Применение:
- Улучшает доступность (accessibility) веб-страниц
- Делает интерактивные элементы более заметными при фокусировке
7.4 Псевдокласс nth-child
Псевдокласс :nth-child применяется к элементам на основе их положения среди дочерних элементов родителя. Он принимает аргумент, который может быть числом, ключевым словом или выражением.
Синтаксис:
селектор:nth-child(n) {
свойство: значение;
свойство: значение;
}
Пример:
Этот селектор позволяет применять стили к элементам на основе их позиции среди братьев и сестер.
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
</ul>
/* Применяет стили ко всем нечетным дочерним элементам */
li:nth-child(odd) {
background-color: lightgray;
}
/* Применяет стили ко всем четным дочерним элементам */
li:nth-child(even) {
background-color: lightblue;
}
/* Применяет стили ко второму дочернему элементу */
li:nth-child(2) {
color: red;
}
Применение:
- Стилизует строки таблиц, элементы списков и другие повторяющиеся структуры
- Позволяет создавать сложные макеты и стилизацию без добавления дополнительных классов
7.5 Примеры использования псевдоклассов
<button type="button">Button</button>
button:hover, button:focus {
background-color: darkblue;
color: white;
}
Стилизация четных строк таблицы:
<table>
<tr>
<th>Название</th>
<th>Количество</th>
<th>Цена</th>
</tr>
<tr>
<td>Товар 1</td>
<td>5</td>
<td>10 руб.</td>
</tr>
<tr>
<td>Товар 2</td>
<td>3</td>
<td>15 руб.</td>
</tr>
<tr>
<td>Товар 3</td>
<td>8</td>
<td>7 руб.</td>
</tr>
</table>
tr:nth-child(even) {
background-color: #f2f2f2;
}
Исключение определенных элементов из общего стиля:
<ul>
<li class="list-item">Element 1</li>
<li class="list-item">Element 2</li>
<li class="list-item">Element 3</li>
<li class="list-item">Element 4</li>
<li class="list-item">Element 5</li>
<li class="list-item">Element 6</li>
<li class="list-item">Element 7</li>
</ul>
.list-item:not(:last-child) {
border-bottom: 1px solid #ddd;
}
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ