Псевдоклассы — это селекторы, которые выбирают элементы в определённом состоянии или позиции:
/* Основные псевдоклассы */
a:hover { color: red; }
input:focus { border: 2px solid blue; }
li:first-child { font-weight: bold; }
p:nth-child(2n) { background: #f0f0f0; }Псевдоклассы — это как умные фильтры, которые выбирают элементы не по их типу или классу, а по состоянию, позиции или другим характеристикам! 🎯
/* Одинарное двоеточие для псевдоклассов */
element:pseudo-class {
property: value;
}
/* Можно комбинировать */
element.class:pseudo-class {
property: value;
}Реагируют на действия пользователя:
/* Наведение */
a:hover {
color: #007bff;
text-decoration: underline;
}
/* Фокус */
input:focus {
outline: none;
border: 2px solid #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
/* Активное состояние */
button:active {
transform: scale(0.98);
background: #0056b3;
}
/* Посещённые ссылки */
a:visited {
color: purple;
}Выбирают элементы по позиции:
/* Первый и последний */
li:first-child {
margin-top: 0;
font-weight: bold;
}
li:last-child {
margin-bottom: 0;
border-bottom: none;
}
/* По номеру */
tr:nth-child(odd) {
background: #f9f9f9;
}
tr:nth-child(even) {
background: white;
}
/* Каждый третий */
.item:nth-child(3n) {
margin-right: 0;
}Работают с типом элемента:
/* Первый элемент типа */
h2:first-of-type {
margin-top: 0;
color: #333;
}
/* Последний элемент типа */
p:last-of-type {
margin-bottom: 0;
}
/* Единственный элемент типа */
img:only-of-type {
display: block;
margin: 0 auto;
}Исключает элементы из выборки:
/* Все кнопки кроме disabled */
button:not(:disabled) {
cursor: pointer;
opacity: 1;
}
/* Все ссылки кроме внешних */
a:not([href^="http"]) {
color: #007bff;
}
/* Все элементы кроме первого */
.menu-item:not(:first-child) {
margin-left: 20px;
}Для элементов форм:
/* Обязательные поля */
input:required {
border-left: 3px solid red;
}
/* Валидные поля */
input:valid {
border-color: green;
}
/* Невалидные поля */
input:invalid {
border-color: red;
background: #ffe6e6;
}
/* Отключённые элементы */
input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Отмеченные чекбоксы */
input:checked + label {
font-weight: bold;
color: green;
}/* Элементы на определённом языке */
p:lang(en) {
font-family: "Times New Roman", serif;
}
p:lang(ru) {
font-family: "Arial", sans-serif;
}/* Целевой элемент (по якорю) */
:target {
background: yellow;
padding: 10px;
}
/* Ссылки на текущую страницу */
a[href="#"]:hover {
cursor: default;
text-decoration: none;
}.nav-item {
padding: 10px 15px;
transition: all 0.3s ease;
}
.nav-item:hover {
background: #f0f0f0;
transform: translateY(-2px);
}
.nav-item:first-child {
border-radius: 5px 0 0 5px;
}
.nav-item:last-child {
border-radius: 0 5px 5px 0;
}table tr:nth-child(even) {
background: #f8f9fa;
}
table tr:hover {
background: #e9ecef;
cursor: pointer;
}
table th:first-child,
table td:first-child {
padding-left: 20px;
}.form-group input:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.form-group input:valid {
border-color: #28a745;
}
.form-group input:invalid:not(:focus) {
border-color: #dc3545;
}/* Несколько псевдоклассов */
a:hover:not(:visited) {
color: #ff6b6b;
}
/* С другими селекторами */
.button:hover:not(:disabled) {
background: #0056b3;
transform: translateY(-1px);
}
/* Вложенные состояния */
.card:hover .card-title:first-child {
color: #007bff;
}| Псевдоклассы | Псевдоэлементы |
|---|---|
Одно двоеточие : | Двойное двоеточие :: |
| Состояние элемента | Часть элемента |
:hover, :focus | ::before, ::after |
Большинство псевдоклассов поддерживаются всеми современными браузерами:
:hover, :focus, :active — полная поддержка:nth-child(), :first-child — IE9+:not() — IE9+ (ограниченно):focus-visible — современные браузеры:hover, :focus 🖱️:first-child, :nth-child() 📋:valid, :invalid ✅Псевдоклассы — мощный инструмент для создания интерактивных и адаптивных интерфейсов:
:hover, :focus, :active:first-child, :nth-child(), :last-child:valid, :invalid, :required:not(), :targetИспользуйте их для создания живых и отзывчивых интерфейсов! 🎨