Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



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



Что такое псевдоклассы?

Псевдокласс используется для определения особого состояния элемента.

Например, он может быть использован для:

  • Стиля элемента при наведении курсора мыши
  • Стиля посещенных и непосещенных ссылок
  • Стиля элемента, для получения фокуса

Наведении курсора мыши


Синтаксис псевдоклассов

Селектор: псевдокласс {
   Свойство: значение;
}

Якорь псевдоклассов

Ссылки могут отображаться по-разному:

/* непросмотренная ссылка */
a:link {
   color: #FF0000;
}

/* просмотренная ссылка */
a:visited {
   color: #00FF00;
}

/* наведение мыши на ссылку */
a:hover {
   color: #FF00FF;
}

/* активная ссылка */
a:active {
   color: #0000FF;
}
Попробуйте сами »


Примечание: a:hover должен стоять после a:link и a:visited в определение CSS для того, чтобы быть эффективней! a:active должен стоять после a:hover в определение CSS для того, чтобы быть эффективнее! Имена псевдоклассов не чувствительны к регистру..


Псевдоклассы и HTML классы

Псевдоклассы должны быть объединены с классами HTML:

При наведении курсора на ссылку в примере, она изменит цвет:

a.highlight:hover {
   color: #ff0000;
}
Попробуйте сами »

При наведении курсора на <div>

Пример использования псевдокласса :hover в элементе <div>:

div:hover {
   background-color: blue;
}
Попробуйте сами »

Всплывающая подсказка при наведении

Наведите курсор на элемент <div> для элемента <p> (как всплывающая подсказка):

<p>Наведите курсор на меня, чтобы показать элемент </p>

Подсказка!

p {
   display: none;
   background-color: yellow;
   padding: 20px;
}

div:hover p {
   display: block;
}
Попробуйте сами »

CSS псевдокласс - :first-child

Псевдокласс :first-child соответствует заданному элементу, который является первым дочерним элементом другого элемента.

Соответствует первому элементу <p>

В следующем примере селектор соответствует любому элементу <p>, который является первым дочерним элементом любого элемента:

p:first-child{
   color: blue;
}
Попробуйте сами »

Первый элемент <i> во всех <p>

В следующем примере селектор соответствует любому элементу <i> во всех элементах <p>:

p i:first-child{
   color: blue;
}
Попробуйте сами »

Все элементы <i> в первом элементе <p>

В следующем примере селектор соответствует всем элементам <i> в элементах <p>, которые являются первыми дочерними элементами другого элемента:

p:first-child i{
   color: blue;
}
Попробуйте сами »

CSS псевдокласс - :lang

Псевдокласс :lang позволяет определить специальные правила для разных языков.

В пример ниже, :lang определяет кавычки для элементов <q> с lang="no":

<html>
<head>
<style>
q:lang(no){
   quotes: "~" "~";

}
</style>
</head>

<body>
<p>Начало текста <q lang="no">Цитата в параграфе</q> конец текста.</p>
</body>
</html>
Попробуйте сами »

Еще примеры псевдоклассов

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

Использовать :focus
Этот пример демонстрирует, как использовать псевдокласс :focus.


Практика: псевдокласс

Упражнение: псевдокласс p

Установите цвет фона на красный при наведении курсора мыши на ссылку.

<style>
 {
  background-color: red;
}
</style>

<body>

<h1>Это заголовок.</h1>
<p>Это параграф.</p>
<a href="https://schoolsw3.com">Это ссылка.</a>

</body>


Все CSS псевдоклассы

Селектор Пример Описание
:active a:active Выбирает активную ссылку
:checked input:checked Выбирает каждый элемент проверки в <input>
:disabled input:disabled Выбирает каждый элемент отключение в <input>
:empty p:empty Выбирает каждый элемент <p>, который не имеет детей
:enabled input:enabled Выбирает каждый элемент включение в <input>
:first-child p:first-child Выбирает каждый элемент <p>, является первым ребенком своего родителя
:first-of-type p:first-of-type Выбирает каждый элемент <p>, является первым элементом <p> своего родителя
:focus input:focus Выбирает элемент <input>, который имеет фокус
:hover a:hover Выбирает ссылку при наведение курсором
:in-range input:in-range Выбирает элементы <input> в пределах указанного диапазона значений
:invalid input:invalid Выбирает все элементы <input> с недопустимым значением
:lang(language) p:lang(it) Выбирает каждый элемент <p> со значением атрибута lang, начиная с "it"
:last-child p:last-child Выбирает каждый элемент <p> что является последним ребенком своего родителя
:last-child :last-of-type Выбирает каждый элемент <p>, который является последним элементом <p> своего родителя
:link a:link Выбирает все непосещенные ссылки
:not(selector) :not(p) Выбирает каждый элемент которого нет в элементе <p>
:nth-child(n) p:nth-child(2) Выбирает каждый элемент <p>, что это второй ребенок своего родителя
:nth-last-child(n) p:nth-last-child(2) Выбирает каждый элемент <p>, который является вторым ребенком своего родителя, считая от последнего ребенка
:nth-last-of-type(n) p:nth-last-of-type(2) Выбирает каждый элемент <p> вторичного элемента <p> своего родителя, считая от последнего ребенка
:nth-of-type(n) p:nth-of-type(2) Выбирает каждый элемент <p> вторичного элемента <p> своего родителя
:only-of-type p:only-of-type Выбирает каждый элемент <p> , который является единственным элементом <p> своего родителя
:only-child p:only-child Выбирает каждый элемент <p>, который является единственным ребенком своего родителя
:optional input:optional Выбирает элемент <input> без атрибута "required"
:out-of-range input:out-of-range Выбирает элемент <input> со значением, выходящим за пределы указанного диапазона
:read-only input:read-only Выбирает элемент <input> с определенным атрибутом "readonly"
:read-write input:read-write Выбирает элемент <input> без атрибута "readonly"
:required input:required Выбирает элемент <input> с определённым атрибутом "required"
:root root Выбирает корневой элемент документа
:target #news:target Выбирает текущий активный #news элемент (нажали на URL-адрес, содержащий имя якоря)
:valid input:valid Выбирает все элементы <input> с допустимым значением
:visited a:visited Выбирает все посещенные ссылки

Все CSS псевдоэлементы

Селектор Пример Описание примера
::after p::after Вставить что-то после содержания каждого элемента <p>
::before p::before Вставить что-то перед содержанием каждого элемента <p>
::first-letter p::first-letter Выбирает первую букву каждого элемента <p>
::first-line p::first-line Выбирает первую строку каждого элемента <p>
::marker ::marker Выбирает маркеры элементов списка
::selection p::selection Выбирает часть элемента, выбранного пользователем


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.