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

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

Например, псевдоклассы могут использоваться, чтобы определять

  • стили элементов, когда пользователь наводит на них курсор мыши,
  • разные стили для посещенных и не посещенных ссылок,
  • стиль элемента, когда он получает фокус.
Наведи сюда мышь

Синтаксис

Декларация селектора с псевдоклассом имеет следующий синтаксис:


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

Т.е. псевдокласс ставится после селектора и отделяется от него двоеточием.

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

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

Есть четыре псевдокласса ссылки:

  • :link - обычная, не посещенная ссылка
  • :visited - ссылка, которую пользователь уже посетил
  • :hover - ссылка, на которую наведен курсор мыши
  • :active - ссылка в момент нажатия

a:link {
   color: blue;
}

a:visited {
   color: purple;
}

a:active {
   color: red;
}

a:hover {
   text-decoration: none;
   color: blue;
   background-color: yellow;
}

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

Назначение иного цвета для посещенных ссылок – это хорошая практика, поскольку многие пользователи этого ожидают, хотя CSS предоставляет возможность этого не делать.

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

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

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


a.highlight:hover {
  color: #ff0000;
}

Псевдокласс :hover с другими элементами

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

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


div:hover {
  background-color: blue;
}

К сожалению, браузер Internet Explorer не поддерживает такой вариант использования данного псевдокласса. И это чрезвычайно прискорбно, так как лишает возможности применять различные визуальные трюки, которые так восхитительно смотрятся в других браузерах.

Простая появляющаяcя подсказка

Пример простой появляющейся подсказки. При наведении на элемент <div> отображается элемент <p>:

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

Тада! А вот и я!


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

div:hover p {
  display: block;
}

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

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

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


p:first-child {
  color: blue;
}

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


p i:first-child {
  color: blue;
}

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


p:first-child i {
  color: blue;
}

Псевдокласс :lang

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

В следующем примере :lang определяет цитатные символы для элемента <q> с атрибутом lang="no":


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

<p>Какой-то текст <q lang="no">Такая-то цитата</q> Какой-то текст.</p>

</body>
</html>

Другие псевдоклассы

Кроме описанных существуют и другие псевдоклассы, которые могут оказаться весьма полезны при определении стилей HTML элементов:

ПсевдоклассПримерОписание
:checkedinput:checkedВыбирает каждый элемент <input> со статусом "включен" (с атрибутом checked)
:disabledinput:disabledВыбирает каждый заблокированный элемент <input> (с атрибутом disabled)
:emptyp:emptyВыбирает все заданные элементы, у которых нет дочерних элементов
:enabledinput:enabledВыбирает все доступные элементы <input>
:first-of-typep:first-of-typeВыбирает каждый элемент, который является первым дочерним заданным элементом своего родителя
:focusinput:focusВыбирает элемент, на который переведен фокус
:in-rangeinput:in-rangeВыбирает элемент <input> со значением в заданном диапазоне
:invalidinput:invalidВыбирает все элементы <input>, значение которых не соответствует указанному типу
:last-childp:last-childВыбирает каждый элемент, который является последним дочерним элементом своего родителя
:last-of-typep:last-of-typeВыбирает каждый элемент, который является последним дочерним заданным элементом своего родителя
:not(селектор):not(p)Выбирает каждый элемент, который не является указанным элементом
:nth-child(n)p:nth-child(2)Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя
:nth-last-child(n)p:nth-last-child(2)Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя, считая от последнего дочернего элемента
:nth-last-of-type(n)p:nth-last-of-type(2)Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя, считая от последнего дочернего элемента
:nth-of-type(n)p:nth-of-type(2)Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя
:only-of-typep:only-of-typeВыбирает каждый элемент, который является единственным элементом такого типа у своего родителя
:only-childp:only-childВыбирает каждый элемент, который является единственным дочерним элементом у своего родителя
:optionalinput:optionalВыбирает элементы формы без атрибута "required"
:out-of-rangeinput:out-of-rangeВыбирает элементы <input>, значения которых выходят за пределы заданного диапазона
:read-onlyinput:read-onlyВыбирает элементы формы с атрибутом "readonly"
:read-writeinput:read-writeВыбирает элементы формы без атрибута "readonly"
:requiredinput:requiredВыбирает элементы формы с атрибутом "required"
:rootrootВыбирает корневой элемент документа
:target#news:targetВыбирает текущий активный элемент (у которого было нажато на URL, содержащее это имя анкора)
:validinput:validВыбирает все элементы <input> с вылидным значением