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

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

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

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

Стилизация элемента, когда пользователь наводит на него курсор мыши
Оформляйте посещенные и непосещенные ссылки по-разному.
Оформление элемента, когда он получает фокус

Mouse Over Me

Синтаксис

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

selector:pseudo-class {
  property: value;
}

Якорные псевдоклассы

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

Пример

  /* unvisited link */
a:link {
  color: #FF0000;
}
/* visited 
link */
a:visited {
  color: #00FF00;
}
/* mouse over link */
a:hover {
  color: #FF00FF;
}
/* selected link */
a:active {
  color: #0000FF;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Примечание: a:hover ДОЛЖЕН идти после a:link и a:visited в определении CSS для большей эффективности! a:active ДОЛЖЕН идти после a:hover в определении CSS для большей эффективности! Имена псевдоклассов не чувствительны к регистру.

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

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

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

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and HTML Classes</h2>

<p>When you hover over the first link below, it will change color and font size:</p>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>

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

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

Пример

div:hover {
  background-color: blue;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

Простая подсказка при наведении

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

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

Пример

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

div:hover p {
  display: block;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over this div element to show the p element
  <p>Tada! Here I am!</p>
</div>

</body>
</html>

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

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

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

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

Пример

p:first-child
{
   
color: blue;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

<div>
  <p>This is some text.</p>
  <p>This is some text.</p>
</div>

</body>
</html>

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

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

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

Сопоставить все элементы <i> во всех первых дочерних элементах <p>

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

Пример

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

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<div>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>

</body>
</html>

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

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

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

Пример

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

<p>Some text <q lang="no">A quote in a paragraph</q> 
Some text.</p>

</body>
</html>

Попробуйте сами →

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

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

</body>
</html>

Больше примеров

Добавляйте разные стили к гиперссылкам

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

Использование: фокус

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Все псевдоклассы 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-of-type

Пример:

p: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> без «обязательного» атрибута.

:out-of-range

Пример:

input:out-of-range

Пример описания:

Выбирает элементы <input> со значением вне указанного диапазона.

:read-only

Пример:

input:read-only

Пример описания:

Выбирает элементы <input> с указанным атрибутом «только для чтения».

:read-write

Пример:

input:read-write

Пример описания:

Выбирает элементы <input> без атрибута «только для чтения».

:required

Пример:

input:required

Пример описания:

Выбирает элементы <input> с указанным «обязательным» атрибутом.

: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

Пример описания:

Выбирает часть элемента, выбранную пользователем.

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

Оглавление

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

Синтаксис

Якорные псевдоклассы

Пример

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

Пример

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

Пример

Простая подсказка при наведении

Пример

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

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

Пример

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

Пример

Сопоставить все элементы <i> во всех первых дочерних элементах <p>

Пример

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

Пример

Больше примеров

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

:active

:checked

:disabled

:empty

:enabled

:first-child

:first-of-type

:focus

:hover

:in-range

:invalid

:lang(language)

:last-child

:last-of-type

:link

:not(selector)

:nth-child(n)

:nth-last-child(n)

:nth-last-of-type(n)

:nth-of-type(n)

:only-of-type

:only-child

:optional

:out-of-range

:read-only

:read-write

:required

:root

:target

:valid

:visited

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

::after

::before

::first-letter

::first-line

::marker

::selection