CSS Псевдо-класси
Що таке Псевдо-класи?
Псевдо-клас використовується для визначення особливого стану елемента.
Наприклад, його можна використовувати для:
- Стилізації елемента, коли користувач наводить на нього курсор
- Стилізації відвіданих та невідвіданих посилань по-різному
- Стилізації елемента, коли він знаходиться в фокусі
Наведи курсор наді мною
Синтаксис
Синтаксис псевдо-класів:
selector:pseudo-class {
property:value;
}
Якірні псевдо-класи
Посилання можуть відображатися по-різному:
Приклад
/* невідвідуване посилання */
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, щоб бути ефективним! Імена псевдо-класів не чутливі до регістру.
Псевдо-класи та CSS-класи
Псевдо-класи можна комбінувати із CSS-класами:
Коли ви наведете курсор на посилання в прикладі, воно змінить колір:
Наведення курсора на <div>
Приклад використання псевдо-класу :hover на елементі <div>:
Проста виринаюча підказка
Наведіть вказівник миші на елемент <div> щоб відобразити елемент <p> (наприклад, виринаючу підказку):
<p>.
Опачки! А ось і я!
Приклад
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Спробуйте самі »
CSS - Псевдо-клас :first-child
Псевдо-клас :first-child відповідає заданому елементу, який є першим дочірнім елементом другого елементу.
Відповідає першому елементу <p>
В наступному прикладі селектор відповідає будь-якому елементу <p>, який є першим дочірнім елементом будь-якого елемента:
Відповідає першому елементу <i> в усіх елементах <p>
В наступному прикладі селектор відповідає першому елементу <i> в усіх елементах <p>:
Співставити всі елементи <i> в усіх перших дочірніх елементах <p>
В наступному прикладі селектор співставляє всі елементи <i> в елементах <p>, які є першими дочірніми елементами другого елемента:
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.
Перевірте себе за допомогою вправ!
Всі 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> без атрибута "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> |
| ::selection | p::selection | Обирає частину елемента, яка обрана користувачем |
