Як зрозуміти
- Як пишеться
- ::before та ::after
- ::first-letter
- ::first-line
- ::selection
- ::placeholder
- ::marker
- ::backdrop
- Андрій Пілюгін радить
- Олена Батицька радить
- У чому різниця між псевдоелементом та псевдокласом? Що таке псевдоселектор?
Оновлено 17 червня 2024
Коротко
Скопіювати посилання "Коротко" Скопійовано
Псевдоелементи — це елементи, яких немає у HTML-розмітці. Вони створюються та позиціонуються виключно за допомогою CSS. Найчастіше використовуються для створення різних декоративних елементів (які не мають змістовного сенсу).
Також псевдоелементи приходять на допомогу, коли потрібно накласти поверх картинки так званий оверлей (шар, що перекриває). На цьому користь псевдоелементів не закінчується.
приклад
Скопіювати посилання "Приклад" Скопійовано
Найчастіший сценарій використання псевдоелемента – накладення оверлею, напівпрозорої заливки поверх картинки. Найчастіше це потрібно на першому екрані, але в цей спосіб можна накласти оверлей на будь-яке зображення на сайті.
Good evening, Clarice.
header
class="header">
h1
class="header__title">Good evening, Clarice.h1>
header>
.header background: #999999
url("background.svg")
no-repeat center/cover;>
.header__title color: #ffffff;
font-size: 82px;
text-transform: uppercase;
text-align: center;>
.header
background:
#999999
url("background.svg") no-repeat center / cover;
>
.header__title
color:
#ffffff;
font-size:
82px;
text-transform: uppercase;
text-align: center;
>
Щоб колір картинки був не таким яскравим і текст краще читався, накладемо поверх всього header напівпрозору заливку чорного кольору.
Додаємо позиціонування батькові та вказуємо порядок накладання:
.header position: relative;
z-index: 0;>
.header
position: relative;
z-index:
0;
>
content - обов'язкова властивість псевдоелементів :: before і :: after. Позиціонуємо псевдоелемент щодо батька та розтягуємо на всю ширину та висоту. Після чого задаємо напівпрозоре чорне тло і прибираємо під текст за допомогою z-index:
.header::before content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0 0 0/0.7);
z-index: -1;>
.header::before
content:
"";
position: absolute;
top:
0;
left:
0;
width:
100%;
height:
100%;
background-color:
rgba(0
0
0
/
0.7);
z-index:
-1;
>
Не чіпаючи HTML-розмітку, ми додали ще один елемент у декоративних цілях. Розмітка залишилася чистою. Псевдоелемент легко керувати, додавати або видаляти його за необхідності, навіть якщо немає доступу до HTML.
Як зрозуміти
Скопіювати посилання "Як зрозуміти" Скопійовано
Визначення приставки "псевдо" у словнику: ".Приставка, що означає хибність, несправжність наступного за нею».
З цього визначення можна зрозуміти, що псевдоелементи не існують насправді. Це породження CSS, яке можна змінювати, видаляти, додавати, не торкаючись реальної HTML-розмітки.
Як пишеться
Скопіювати посилання "Як пишеться" Скопійовано
Існує кілька псевдоелементів. Розглянемо кожен із них.
: : before та : : after
Скопіювати посилання "::before та ::after" Скопійовано
Два найчастіше зустрічаються псевдоелементи. Вони дуже схожі. Єдина різниця полягає в тому, що : : before за умовчанням розташовується перед вмістом елемента, для якого задається, а : : after після. Ця різниця відображена у назві: слово before перекладається з англійської як "до" або "перед"; слово after перекладається як «після».
Для обох елементів обов'язковою є властивість content – вміст псевдоелемента. З його допомогою можна, наприклад, вставити якесь слово до або після тексту. Без якості вмісту псевдоелемент не відобразиться.
Створимо текстовий елемент із ім'ям користувача.
Гордон
span
class="incoming">Гордонspan>
Вітаємо користувача та скажемо йому комплімент:
.incoming::before content: "Привіт";>
.incoming::after content: ", ти чудово виглядаєш!";>
.incoming::before
content:
"Привіт,";
>
.incoming::after
content:
", Ти чудово виглядаєш!";
>
Як видно з прикладу, текст із властивості content псевдоелемента : : before став перед ім'ям користувача, та якщо з псевдоелемента : : after — після.
Ці псевдоелементи за умовчанням є малими. Але це легко змінити за допомогою стилів.
Підкреслимо декоративну лінію тексту.
Задамо батькові рядково-блочне відображення, щоб лінія була шириною тексту:
.incoming display: inline-block;>
.incoming::before content: "Привіт,";>
.incoming::after content: "";
display: block;
width: 100%;
height: 2px;
background-color: #F498AD;>
.incoming
display: inline-block;
>
.incoming::before
content:
"Привіт,";
>
.incoming::after
content:
"";
display: block;
width:
100%;
height:
2px;
background-color:
#F498AD;
>
: : first - letter
Скопіювати посилання "::first-letter" Скопійовано
За допомогою цього псевдоелемента можна вибрати першу літеру у рядку або абзаці тексту. Це дозволяє створити так звану буквицю - велику декоративну букву на початку тексту.
У траві біля високих мурашників.
p
class="text"> У траві біля високих мурашників. p>
Збільшуємо розмір першої літери та фарбуємо її в червоний колір:
.text::first-letter font-size: 52px;
color: #F498AD;>
.text::first-letter
font-size:
52px;
color:
#F498AD;
>
: : first - line
Скопіювати посилання "::first-line" Скопійовано
Цей псевдоелемент вибирає перший рядок тексту. Зверніть увагу, що він спрацює лише для блокових елементів. З малими цей трюк не пройде.
Наприклад, можна зробити «червоний рядок», щоправда, не так, як вчили у школі =)
У далекій та блідій глибині неба.
p
class="text"> У далекій та блідій глибині неба. p>
Фарбуємо перший рядок у червоний:
.text::first-line background-color: #F498AD;>
.text::first-line
background-color:
#F498AD;
>
:: selection
Скопіювати посилання "::selection" Скопійовано
За допомогою псевдоелемента :: selection можна керувати стилем тексту, який користувач виділяє за допомогою миші.
Текст на сайті Smashing Magazine вирізняється червоним кольором. Використання псевдоелемента :: selection дозволяє витримати стиль оформлення у всьому, аж до такої дрібниці, як виділення тексту.
Найдоцільніше задавати цей псевдоелемент не якомусь окремому блоку, а всій сторінці цілком.
::selection background-color: #F498AD;>
::selection
background-color:
#F498AD;
>
Якщо виділити текст у цьому прикладі, стане видно, що фон виділення яскраво-червоного кольору.
:: placeholder
Скопіювати посилання "::placeholder" Скопійовано
Він дозволяє стилізувати підказку, яка виводиться у полі введення тексту ( ).
Текст підказки задається за допомогою атрибута placeholder у тега.
input
type="email"
placeholder="[email protected]">
За промовчанням колір тексту підказки сірий. Але іноді за дизайном потрібен інший колір.
Використовуйте псевдоелемент :: placeholder і задайте потрібні стилі для підказки. Можна змінити все, аж до шрифту. При цьому стилі тексту, який вводитиме користувач, не будуть порушені.
input::placeholder color: #2E9AFF;>
input::placeholder
color:
#2E9AFF;
>
: : marker
Скопіювати посилання "::marker" Скопійовано
:: marker - псевдоелемент, що відповідає за маркерне поле. У ньому перебувають, наприклад, маркери списку.
:: backdrop
Скопіювати посилання "::backdrop" Скопійовано
Псевдоелемент :: backdrop відповідає за підкладку, що з'являється під елементами, що спливають на верхній рівень.
Підказки
Скопіювати посилання "Підказки" Скопійовано
💡 Обов'язково перевіряйте підтримку псевдоелемента у потрібних браузерах. Для цього можна використати сайт Can I use.
💡 Для якості вмісту є кілька корисних трюків. Наприклад, можна за допомогою data-атрибута у тега (якому можна задати значення за допомогою JavaScript) і значення attr (data - атрибут) вивести кількість непрочитаних повідомлень на лейблі. Або кількість товарів у кошику. Такий спосіб буде «дешевшим» у тому плані, що реальна HTML-розмітка не змінюється.
💡 В якості значення властивості content можна вставляти юнікод.Наприклад, можна додати символ копірайту за допомогою запису content: "& # 169;" .
💡 Можна зустріти в коді написання псевдоелементів з однією двокрапкою на початку. Такий синтаксис допустимо майже завжди, крім як із псевдоелементами :: selection і :: placeholder. Але в останніх редакціях специфікації рекомендується писати всі псевдоелементи з двома двокрапками, щоб візуально відокремити їх від псевдокласів.
На практиці
Скопіювати посилання "На практиці" Скопійовано
Андрій Пілюгін радить
Скопіювати посилання "Андрій Пілюгін радить" Скопійовано
🛠 Так як псевдоелементи :: before і :: after відсутні в дереві DOM, то неможливо на них повісити JavaScript-подію. Найчастіше досить відстежувати події самому елементі і крізь нього змінювати властивості псевдоэлемента. Якщо необхідно відстежити, наприклад, клік саме за псевдоелементом, можна використовувати хак з порівнянням offset X .
Наприклад, створимо управляючий контрол, що дозволяє змінювати кількість товарів у кошику. При цьому кнопки "+" та "-" у нас будуть псевдоелементами.
Це демонстраційний приклад. У реальному житті краще так не робити. Використовуйте відповідні HTML-теги.
0
span
class="quantity-change">0span>
Задамо стилі для поля введення:
.quantity-change display: flex;
align-items: center;
justify-content: space-between;
width: 160px;
height: 44px;
border-radius: 6px;
background-color: #2E9AFF;
color: #000000;
font-size: 24px;
cursor: Text;
user-select: none;>
.quantity-change
display: flex;
align-items: center;
justify-content: space-between;
width:
160px;
height:
44px;
border-radius:
6px;
background-color:
#2E9AFF;
color:
#000000;
font-size:
24px;
cursor: text;
user-select: none;
>
Для цього хака потрібно уважно стежити за шириною елемента, оскільки подія обчислюватиметься саме за шириною. В даному випадку ширина елемента 160 px.
Керуючі контролі (в ролі яких у нас виступатимуть : : before та : : after ) будуть по 40 px:
.quantity-change::before, .quantity-change::after display: flex;
align-items: center;
justify-content: center;
width: 40px;
font-size: 34px;
cursor: pointer;>
.quantity-change::before content: '-';>
.quantity-change::after content: '+';>
.quantity-change::before,
.quantity-change::after
display: flex;
align-items: center;
justify-content: center;
width:
40px;
font-size:
34px;
cursor: pointer;
>
.quantity-change::before
content:
'–';
>
.quantity-change::after
content:
'+';
>
Тепер, знаючи ширину елементів і контролів, вважаємо, що натискання перших 40 px є подією для : : before , а натискання останніх 40 px для : : after :
const quantity = document.querySelector('.quantity-change')let counter = Number(quantity.textContent)
quantity.addEventListener('click', (event) => if(event.offsetX 0) counter--
> else if(event.offsetX >= 120) counter++
>
quantity.textContent = counter>)
const quantity =
document.querySelector('.quantity-change')
let counter =
Номер(quantity.textContent) quantity.addEventListener('click',
(event)
=>
if(event.offsetX
40
&& counter >
0)
counter--
>
else
if(event.offsetX
>=
120)
counter++
> quantity.textContent
= counter >)
Бінґо! Тепер ми можемо відстежити натискання на псевдоелементи та виконати потрібні дії.
Даний метод варто застосовувати з обережністю, з огляду на медіавираження, які можуть змінити розміри елемента і все зламати. Якщо є можливість спроектувати свій код без зв'язки «Псевдоелементи + JavaScript», це буде гарним рішенням.
Олена Батицька радить
Скопіювати посилання "Олена Батицька радить" Скопійовано
🛠 Дуже цікавий і корисний трюк - ставити кастомний лічильник спискам. Буває потреба додати дужки після цифри замість стандартної точки.
Для створення кастомного лічильника насамперед потрібно скинути стандартні маркери списку:
.list list-style-type: none;>
.list
list-style-type: none;
>
Тепер придумаємо та пропишемо ім'я нового лічильника. Ім'я лічильника використовуватиметься далі.
.list list-style-type: none;
counter-reset: new-counter;>
.list
list-style-type: none;
counter-reset: new-counter;
>
Говоримо браузеру, що треба вважати саме пункти списку:
.list__item counter-increment: new-counter;>
.list__item
counter-increment: new-counter;
>
Тепер для кожного пункту списку прописуємо псевдоелемент :: before і запускаємо кастомний лічильник, доповнюючи його потрібними символами. У поточному випадку в лапках додаємо круглу дужку та пробіл:
.list__item::before content: counter(new-counter) ")";>
.list__item::before
content:
counter(new-counter)
") ";
>
Подібним чином можна змінювати стилі маркерів як заманеться.
🛠 Псевдоелементи - найкраще, що придумали в CSS 😆 З ними жити і верстати набагато простіше. Приділіть час та пошукайте цікаві трюки та фішки, які можна зробити за допомогою псевдоелементів.
Ці маленькі друзі верстальника можуть здивувати вас своєю могутністю.
Їхні можливості заслуговують на окрему статтю. Наприклад, такою, яку написав Кріс Койєр: A Whole Bunch of Amazing Stuff Pseudo Elements Can Do.
На співбесіді
Скопіювати посилання "На співбесіді" Скопійовано
У чому різниця між псевдоелементом та псевдокласом? Що таке псевдоселектор?
Копіювати посилання "У чому різниця між псевдоелементом та псевдокласом? Що таке псевдоселектор?" Скопійовано
Це питання без відповіді. Ви можете допомогти! Щоб написати відповідь, дотримуйтесь інструкцій.
