CSS - Пseudo-классы
Что такое Пseudo-класс?
Здравствуйте, будущие маги CSS! Сегодня мы окунемся в магический мир CSS pseudo-классов. Не пугайтесь замысловатого термина - я обещаю, что это не так сложно, как может показаться. На самом деле, как только вы привыкните, вы будете использовать pseudo-классы как профессионал в считанные минуты!
Так что же такое pseudo-класс? Представьте, что у вас есть суперсила, которая позволяет вам стилизовать элементы на вашем веб-сайте в зависимости от их состояния или условия. Именно это и делают pseudo-классы! Они позволяют вам применять стили к элементам в зависимости от таких вещей, как то,hover-ит ли пользователь над ними, являются ли они первым элементом в списке, или даже на каком языке находится страница.
Синтаксис
Прежде чем мы перейдем к конкретным pseudo-классам, давайте быстро рассмотрим синтаксис. Он на самом деле довольно простой:
селектор:pseudo-класс {
свойство: значение;
}Видите тот колон (:) после селектора? Это как раз то, что говорит вам, что вы имеете дело с pseudo-классом. Легко, правда?
Пseudo-класс Hover
Давайте начнем с одного из самых распространенных и有趣的 pseudo-классов: :hover. Этот маленький宝石ик позволяет вам изменять стиль элемента, когда пользователь наводит мышь на него. Это как магия!
<button class="my-button">Наведите курсор на меня!</button>.my-button {
background-color: синий;
color: белый;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.my-button:hover {
background-color: светло-синий;
color: черный;
}В этом примере наша кнопка начинается с синего цвета и белого текста. Но когда вы наводите на нее курсор - пфу! - она меняется на светло-синий с черным текстом. Попробуйте и увидите, как магия происходит!
Пseudo-класс Active
Следующий pseudo-класс - :active. Этот срабатывает, когда элемент активируется пользователем, например, когда они кликают на кнопку.
<button class="my-button">Нажмите меня!</button>.my-button {
background-color: синий;
color: белый;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.my-button:active {
background-color: темный-синий;
transform: scale(0.95);
}Теперь, когда вы нажимаете и держите кнопку, она станет темно-синей и слегка уменьшится. Это как будто кнопка говорит: "Эй, меня нажимают!"
Пseudo-класс Focus
Пseudo-класс :focus особенно полезен для улучшения доступности. Он применяется, когда элемент receives focus, что может произойти, когда пользователь кликает на поле ввода или табуляцию до него.
<input type="text" class="my-input" placeholder="Введите что-то...">.my-input {
border: 2px solid #ccc;
padding: 5px;
}
.my-input:focus {
border-color: синий;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}С этим CSS, когда поле ввода-focused, оно получает синюю рамку и слабое синее свечение. Это отличный способ направить пользователей через формы!
Пseudo-класс nth Child
Теперь давайте немного усложним задачу с pseudo-классом :nth-child(). Этот позволяет вам выбирать элементы на основе их положения в группе братьев.
<ul class="my-list">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
</ul>.my-list li:nth-child(odd) {
background-color: #f2f2f2;
}
.my-list li:nth-child(3n) {
color: синий;
}В этом примере мы стилизуем каждый нечетный элемент списка с легким серым фоном и каждый третий элемент с синим текстом. Это как будто создаем узор в вашем списке!
Пseudo-класс First-Child
Пseudo-класс :first-child выбирает первый элемент среди группы兄弟. Это здорово для предоставления особого обращения первому элементу в списке или первому абзацу в статье.
<div class="container">
<p>Я первый абзац!</p>
<p>Я просто обычный абзац.</p>
<p>Я тоже!</p>
</div>.container p:first-child {
font-weight: bold;
color: синий;
}Теперь первый абзац выделяется среди других. Это как будто дать VIP-пропуск вашему первому элементу!
Пseudo-класс Last-Child
Как вы, наверное, догадались, :last-child - это相反 :first-child. Он выбирает последний элемент среди группы братьев.
<ul class="my-list">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Последний элемент!</li>
</ul>.my-list li:last-child {
font-style: italic;
color: зеленый;
}С этим CSS последний элемент списка получает особое зеленое, kursivnoe оформление. Это отличный способ подвести итог!
Пseudo-класс Lang
Пseudo-класс :lang немного более специализирован. Он позволяет выбирать элементы на основе языка документа или элемента.
<p lang="en">Hello, World!</p>
<p lang="fr">Bonjour, le Monde!</p>
<p lang="es">¡Hola, Mundo!</p>p:lang(en) {
color: синий;
}
p:lang(fr) {
color: красный;
}
p:lang(es) {
color: зеленый;
}Этот CSS окрасит каждое приветствие в зависимости от языка. Это как будто создать многоязычный цветной код для вашего веб-сайта!
Пseudo-класс Not
Last but not least, давайте посмотрим на pseudo-класс :not(). Этот немного другой - он выбирает элементы, которые НЕ соответствуют селектору, который вы указываете.
<div class="container">
<p>Я абзац.</p>
<p class="special">Я особенный абзац!</p>
<p>Я другой абзац.</p>
</div>.container p:not(.special) {
color: серый;
}В этом случае все абзацы, кроме того, у которого есть класс "special", будут окрашены в серый цвет. Это как будто сказать: "Стилизовать все, кроме этой одной вещи!"
Список CSS Pseudo-классов
Существует множество других pseudo-классов в CSS. Вот таблица некоторых из них:
| Pseudo-класс | Описание |
|---|---|
| :hover | Выбирает элемент, когда мышь наводится на него |
| :active | Выбирает элемент, когда он активируется |
| :focus | Выбирает элемент, когда он имеет фокус |
| :nth-child() | Выбирает элементы на основе их положения в группе братьев |
| :first-child | Выбирает первый элемент |
| :last-child | Выбирает последний элемент |
| :lang() | Выбирает элементы на основе языка |
| :not() | Выбирает элементы, которые не соответствуют селектору |
| :link | Выбирает непосещенные ссылки |
| :visited | Выбирает посещенные ссылки |
| :checked | Выбирает отмеченные элементы ввода |
| :disabled | Выбирает отключенные элементы |
| :empty | Выбирает элементы, у которых нет детей |
И вот мы и arrived! Мы прошли через мир CSS pseudo-классов, от базовых до более продвинутых техник. Помните, ключ к maîtriser их - это практика. Так что вперед, поиграйте с этими pseudo-классами в своих проектах. Before you know it, вы будете создавать динамичные, интерактивные веб-сайты, которые respond к действиям пользователей во всех sorts of cool ways. Happy coding!
Credits: Image by storyset