Какие Псевдо-классы?
Псевдо-класс используется для определения особого состояния элемента.
Например, он может быть использован для:
- Стиль элемент, когда пользователь удерживает указатель мыши над ним
- Стиль посетил и посещенные ссылки по-разному
- Стиль элемент, когда он получает фокус
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;
}
Попробуй сам "  | Примечание: a:hover ДОЛЖЕН прийти после того, как a:link с a:visited a:active a:hover a:link и a:visited ! В определении CSS для того , чтобы быть эффективным a:active с a:active должен прийти после того, как a:hover с a:hover в определении CSS для того , чтобы быть эффективным!Имена псевдо-класса не чувствительны к регистру. |
|---|
Псевдо-классы и CSS классы
Псевдо-классы могут быть объединены с классами CSS:
При наведении курсора на ссылку в примере, это изменит цвет:
Наведите указатель мыши на <div>
Пример использования :hover псевдо-класс на <div> элемент:
CSS - The :first-child Псевдо-класс
:first-child псевдо-класс соответствует указанному элементу , который является первым дочерним элементом другого элемента.
Матч первого <p> элемент
В следующем примере, селектор соответствует любому <p> элемент , который является первым дочерним элементом любого элемента:
Матч первого <i> элемент во всех <p> элементы
В следующем примере, селектор совпадает с первым <i> элемент во всех <p> элементов:
Матч всех <i> элементов во всех первого ребенка <p> элементы
В следующем примере селектор соответствует всем <i> элементы <p> элементов , которые являются первым потомком другого элемента:
CSS - The :lang Псевдо-класс
:lang псевдо-класс позволяет определить специальные правила для разных языков.
В приведенном ниже примере :lang определяет кавычки для <q> элементов с 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>
Попробуй сам " 
Еще примеры
Добавить различные стили к гиперссылкам
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.
Использование :focus
Этот пример демонстрирует , как использовать :focus псевдо-класс.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»
Все классы 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> элемент со значением атрибута Ланг , начиная с "ним" |
| :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> элементы, не имеющие "required" атрибута |
| :out-of-range | input:out-of-range | Выбирает <input> элементы со значением вне указанного диапазона |
| :read-only | input:read-only | Выбирает <input> элементы с "readonly" для "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> элемента |
| ::selection | p::selection | Выбирает часть элемента, который выбирается пользователем |