Что такое псевдокласс pseudo-class в CSS

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

Ссылки меняют цвет, картинки увеличиваются, или смещаются в сторону, текст меняет цвет и так далее.

Все подобные эффекты, возникают тогда, когда к элементу применяется pseudo-class.

Псевдоклассов в CSS довольно много, и все они делятся на три группы.

1. Определяющие и влияющие на состояние элементов.


2. Определяющие положение элемента в html коде, и применяющие стили согласно его статуса.

3. Определяющие язык документа, и применяющие стили в зависимости от того, на каком языке этот документ написан.

Синтаксис написания следующий: сначала пишется селектор элемента, к которому применяется pseudo-class, затем — двоеточие, и название pseudo-class, потом стилевые свойства и значения в фигурных скобках.

Селектор:pseudo-class{
Свойства: Значения;
}

Рассмотрим подробно самые популярные.

1. Самый популярный :hover

Именно он изменяет внешний вид элемента, при наведении на него курсора. Реализуется это следующим образом.

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

Следом за ним прописывается этот же селектор, но уже с pseudo-class :hover, где задаются уже другие свойства и значения.

В результате, в обычном состоянии, на странице виден элемент оформленный в первом селекторе, а при наведении на него курсора, оформление меняется на то, которое заданно во втором.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
/*Селектор элемента*/
div{
background: #fcdd76;
width: 200px;
height: 100px;
box-shadow: 0px 0px 0px 5px #0ea8f4;
border-radius: 10px;
}
/*Селектор с pseudo-class*/
div:hover{
background:#F7FC5D;
width: 210px;
height: 110px;
box-shadow: 0px 0px 10px 5px #0ea8f4;
border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Результат:

8789

 

 

 

 

 

В основном, конечно, :hover применяется к ссылкам, но как видите, при желании им можно придать жизни любому элементу.

2. :active — используется в основном для ссылок, а именно меняет их цвет при активации, то есть при нажатии правой клавиши.

Хотя при желании и некоторой фантазии, может быть применён к любому элементу.

3. :visited — так же применяется в основном к ссылкам. Посещённая ссылка, с изменившимся цветом — работа pseudo-class :visited.

4. :link — применяется к не посещённым ссылкам.

Необходимости в его применении нет. Можно просто задать цвет ссылок в селекторе a.

Остальные pseudo-class, не такие популярные, рассмотрим в следующих статьях.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить


Перемена

Секретарша директору:
-Если бы Вы слышали, какие сплети распускает про Вас Ваш зам.
-Ерунда, лишь бы не начал говорить правду.

Как добавить фрагмент текста в CSS < < < В раздел > > > Выпадающее меню средствами CSS

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

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

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