web-разработка

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

Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору. Псевдокласс будет определять только определённое состояние этого селектора. Синтаксис:
селектор:псевдокласс { }
Как и с обычными классами, псевдоклассы можно совмещать вместе в одном селекторе любое число псевдоклассов. Рассмотрим подробно список основных псевдоклассов:

1. :active

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.
Также псевдокласс :active срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a> и <button>, но может применяться и к другим элементам.
Пример:
/* html */

<body>
    <h1>Пример CSS-селектора :active</h1>
    <p>Следующая ссылка станет салатовой в момент клика по ней: <a href="it-black.ru">Сайтик</a>.</p>
</body>
/* css */

a:active 
{ 
color: lime; /* активные ссылки */
}

2. :checked

псевдоклассы :checked находит любые элементы radio (<input type=»radio»>), checkbox (<input type=»checkbox»>) или option (<option> внутри <select>), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.
Примеры:
/* любой "кликабельный" элемент */
:checked {
  width: 50px;
  height: 50px;
}

/* только радиокнопки */
input[type="radio"]:checked {
  margin-left: 25px;
}

/* только чекбоксы */
input[type="checkbox"]:checked {
  display: none;  
}

/* только элементы option */
option:checked {
  color: red;
}

3. :hover

Псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Пример:
/* html */

<p>Наведите курсор <a href="#">на эту ссылку</a> и увидите, как она становится красной.</p>
/* css */

a { color: blue; }
a:hover { color: red; }

4. :visited

Псевдокласс :visited позволяет выбирать ссылки, которые были посещены. По умолчанию ссылки отображаются синими и при посещении становятся фиолетовыми. Примеры:
a:visited { color: #4b2f89; }
a:visited { background-color: white }

5. :focus

Псевдокласс :focus применяется, когда элемент получает фокус, либо при выборе его пользователем при помощи клавиатуры, либо активацией его мышью (например, при вводе формы).
Пример:
/* html */

<input class="first-name" value="Я буду красным, если на меня попадёт фокус">
<input class="last-name" value="Я буду синим при фокусе">
/* css */

.first-name:focus {
  color: red;
}

.last-name:focus {
  color: blue;
}

6. :link

Псевдокласс :link возволяет выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, используя селекторы с другими, относящимися к ссылкам, псевдоклассам типа :hover, :active или :visited,. Пример:
a:link {color: slategray;}
.external:link {background-color: lightblue;}

7. :lang

Данный псевдокласс определяет язык, который используется в документе или его фрагменте. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков. Пример:
/* html */

<p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
/* css */

  p {
    font-size: 1.5em; /* Размер текста */ 
   }
   q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */ 
   }
В этой статье мы рассмотрели небольшую часть псевдоклассов в css. Существует множество различных псевдоклассов. Примеры различных псевдоклассов можно найти в интернете в открытом доступе.
2023-11-18 00:45 Самоучитель по CSS