Псевдоклассы в 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. Существует множество различных псевдоклассов. Примеры различных псевдоклассов можно найти в интернете в открытом доступе.

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Один ответ к “Псевдоклассы в CSS.”

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: