Псевдоклассы CSS используются для добавления специальных эффектов к некоторым селекторам. Вам не нужно использовать JavaScript или любой другой скрипт, чтобы использовать эти эффекты. Простой синтаксис псевдоклассов следующий:
selector:pseudo-class {property: value}
CSS-классы также можно использовать с псевдоклассами —
selector.class:pseudo-class {property: value}
Наиболее часто используемые псевдоклассы следующие:
| Sr.No. | Значение и описание |
|---|---|
| 1 |
:ссылка на сайт Используйте этот класс, чтобы добавить особый стиль к непосещенной ссылке. |
| 2 |
: посетил Используйте этот класс, чтобы добавить специальный стиль к посещаемой ссылке. |
| 3 |
: парить Используйте этот класс, чтобы добавить особый стиль к элементу, когда вы наводите на него курсор мыши. |
| 4 |
: активный Используйте этот класс, чтобы добавить специальный стиль к активному элементу. |
| 5 |
: фокус Используйте этот класс, чтобы добавить специальный стиль к элементу, когда элемент имеет фокус. |
| 6 |
:Первый ребенок Используйте этот класс, чтобы добавить специальный стиль к элементу, который является первым дочерним элементом некоторого другого элемента. |
| 7 |
: языки Используйте этот класс, чтобы указать язык для использования в указанном элементе. |
:ссылка на сайт
Используйте этот класс, чтобы добавить особый стиль к непосещенной ссылке.
: посетил
Используйте этот класс, чтобы добавить специальный стиль к посещаемой ссылке.
: парить
Используйте этот класс, чтобы добавить особый стиль к элементу, когда вы наводите на него курсор мыши.
: активный
Используйте этот класс, чтобы добавить специальный стиль к активному элементу.
: фокус
Используйте этот класс, чтобы добавить специальный стиль к элементу, когда элемент имеет фокус.
:Первый ребенок
Используйте этот класс, чтобы добавить специальный стиль к элементу, который является первым дочерним элементом некоторого другого элемента.
: языки
Используйте этот класс, чтобы указать язык для использования в указанном элементе.
При определении псевдоклассов в блоке <style> … </ style> следует отметить следующие моменты:
-
a: hover ДОЛЖЕН идти после a: link и a: посещения в определении CSS, чтобы быть эффективными.
-
a: active ДОЛЖЕН следовать за: hover в определении CSS, чтобы быть эффективным.
-
Имена псевдоклассов не чувствительны к регистру.
-
Псевдокласс отличается от CSS-классов, но их можно комбинировать.
a: hover ДОЛЖЕН идти после a: link и a: посещения в определении CSS, чтобы быть эффективными.
a: active ДОЛЖЕН следовать за: hover в определении CSS, чтобы быть эффективным.
Имена псевдоклассов не чувствительны к регистру.
Псевдокласс отличается от CSS-классов, но их можно комбинировать.
Псевдокласс: ссылка
В следующем примере показано, как использовать класс : link для установки цвета ссылки. Возможные значения могут быть любым именем цвета в любом допустимом формате.
<html> <head> <style type = "text/css"> a:link {color:#000000} </style> </head> <body> <a href = "">Black Link</a> </body> </html>
Это даст следующую черную ссылку —
The: посетил псевдокласс
Ниже приведен пример, демонстрирующий использование класса : посещения для установки цвета посещаемых ссылок. Возможные значения могут быть любым именем цвета в любом допустимом формате.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>
Это даст следующую ссылку. Как только вы нажмете эту ссылку, она изменит свой цвет на зеленый.
The: hover псевдокласс
В следующем примере показано, как использовать класс : hover для изменения цвета ссылок, когда мы наводим указатель мыши на эту ссылку. Возможные значения могут быть любым именем цвета в любом допустимом формате.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>
Будет произведена следующая ссылка. Теперь вы наведите курсор мыши на эту ссылку и увидите, что она меняет свой цвет на желтый.
The: активный псевдокласс
В следующем примере показано, как использовать класс : active для изменения цвета активных ссылок. Возможные значения могут быть любым именем цвета в любом допустимом формате.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>
Будет произведена следующая ссылка. Когда пользователь щелкает по нему, цвет меняется на розовый.
The: фокус псевдокласс
В следующем примере показано, как использовать класс : focus для изменения цвета целевых ссылок. Возможные значения могут быть любым именем цвета в любом допустимом формате.
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>
Будет произведена следующая ссылка. Когда эта ссылка фокусируется, ее цвет меняется на оранжевый. Цвет меняется обратно, когда он теряет фокус.
Псевдокласс первого ребенка
Псевдокласс : first-child соответствует указанному элементу, который является первым дочерним элементом другого элемента, и добавляет специальный стиль к этому элементу, который является первым дочерним элементом некоторого другого элемента.
Чтобы сделать: first-child work в IE <! DOCTYPE> должен быть объявлен в верхней части документа.
Например, чтобы сделать отступ в первом абзаце всех элементов <div>, вы можете использовать это определение:
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>
Это даст следующий результат —
The: lang псевдокласс
Псевдокласс языка : lang , позволяет создавать селекторы на основе языковых настроек для определенных тегов.
Этот класс полезен в документах, которые должны обращаться к нескольким языкам, которые имеют разные соглашения для определенных языковых конструкций. Например, французский язык обычно использует угловые скобки (<и>) для цитирования, в то время как английский язык использует кавычки (‘и’).
В документе, который должен устранить эту разницу, вы можете использовать псевдокласс: lang, чтобы соответствующим образом изменить кавычки. Следующий код изменяет тег <blockquote> в соответствии с используемым языком.
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>
Селекторы: lang будут применяться ко всем элементам в документе. Однако не все элементы используют свойство quotes, поэтому эффект будет прозрачным для большинства элементов.
Это даст следующий результат —