CSS Псевдо-елементи
Що таке псевдо-елементи?
CSS псевдо-елемент використовується для стилізації визначених частин елемента.
Наприклад, його можна використовувати для:
- Стилізації першої літери або рядка елемента
- Вставки змісту до або після змісту елемента
Синтаксис
Синтаксис псевдо-елементів:
selector::pseudo-element {
property:value;
}
Псевдо-елемент ::first-line
Псевдо-елемент ::first-line використовується для додавання спеціального стилю до першого рядка тексту.
В наступному прикладі форматується перший рядок тексту в усіх елементах <p>
Примітка: Псевдо-елемент ::first-line може застосовуватись лише до блочних елементів.
Наступні властивості відносяться до псевдо-елементу ::first-line:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Зверніть увагу на подвійну двокрапку - ::first-line в порівнянні з :first-line
Подвійна двокрапка замінила запис з двокрапкою для псевдо-елементів в CSS3. Це була спроба W3C зробити різницю між псевдо-класами та псевдо-елементами.
Синтаксис з одинарною двокрапкою використовувався для псевдо-класів та псевдо-елементів в CSS2 та CSS1.
Для зворотньої сумісності синтаксис з одною двокрапкою підходить для псевдо-елементів в CSS2 та CSS1.
Псевдо-елемент ::first-letter
Псевдо-елемент ::first-letter використовується для додавання спеціального стилю до першої літери тексту.
В наступному прикладі форматується перша літера тексту в усіх елементах <p>
Примітка: Псевдо-елемент ::first-letter може застосовуватись лише до блочних елементів.
Наступні властивості застосовуються до псевдо-елементу ::first-letter:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (тільки якщо "float" встановлено "none")
- text-transform
- line-height
- float
- clear
Псевдо-елементи та CSS класи
Псевдо-елементи можна комбінувати із CSS-класами:
В наведеному вище прикладі перша літера параграфу будет відображатися із class="intro", червоним та великим (вдвічі більшим) розміром.
Кілька псевдо-елементів
Кілька псевдо-елементів також можуть бути об’єднані.
В наступному прикладі перша літера параграфу буде червоного кольору з розміром шрифту xx-Large. Інша частина першого рядка буде синьою, а також заголовними літерами. Інша частина параграфа буде розміром і кольором шрифта за замовчуванням:
Приклад
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
Спробуйте самі »
CSS псевдо-елемент - ::before
Псевдо-елемент ::before може використовуватись для вставки деякого змісту перед змістом елемента.
В наступному прикладі вставляється зображення перед змістом кожного елемента <h1>:
CSS псевдо-елемент - ::after
Псевдо-елемент ::after може використовуватись для вставки деякого змісту після змісту елемента.
В наступному прикладі вставляється зображення після змісту кожного елемента <h1>:
CSS псевдо-елемент - ::marker
Псевдо-елемент ::marker обирає маркери елементів списку.
В наступному прикладі стилі маркерів елементів списку:
CSS псевдо-елемент - ::selection
Псевдо-елемент ::selection відповідає частині елемента, обраної користувачем.
Наступні CSS властивості можуть бути застосовані до ::selection:
color, background, cursor та outline.
В наступному прикладі виділений текст стає червоним на жовтому фоні:
Перевірте себе за допомогою вправ!
Всі CSS Псевдо-елементи
| Селектор | Приклад | Опис |
|---|---|---|
| ::after | p::after | Вставляє щось після змісту кожного елемента <p> |
| ::before | p::before | Вставляє щось перед змістом кожного елемента <p> |
| ::first-letter | p::first-letter | Обирає першу літеру кожного елемента <p> |
| ::first-line | p::first-line | Обирає перший рядок кожного елемента <p> |
| ::selection | p::selection | Обирає частину елемента, яка обрана користувачем |
Всі 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 | Обирає всі відвідані посилання |
