Що таке псевдоелемент? Чим псевдоелемент відрізняється від псевдокласу?
Псевдоелемент, це селектор, який дозволяє вибрати і стилізувати певну частину елемента або створити віртуальний елемент, якого немає в HTML-розмітці. Псевдоелемент фактично додає «віртуальний» шматок контенту або виділяє частину тексту (букву, рядок тощо).
Приклад:
css
p::first-letter {
font-size: 40px;
}::first-letter, псевдоелемент, який впливає лише на першу букву абзацу.
Чим псевдоелемент відрізняється від псевдокласу
| Критерій | Псевдоелемент | Псевдоклас |
|---|---|---|
| Що робить | Стилізує частину елемента або додає віртуальний елемент | Описує стан або положення елемента |
| Приклад | ::before, ::after, ::first-letter | :hover, :first-child, :active |
| Виникає | Всередині елемента | На самому елементі |
| Синтаксис | ::подвійна_двокрапка | :одна_двокрапка |
Приклади популярних псевдоелементів
| Псевдоелемент | Призначення |
|---|---|
::before | додає віртуальний елемент перед вмістом |
::after | додає віртуальний елемент після вмісту |
::first-letter | вибирає першу букву |
::first-line | вибирає перший рядок тексту |
::selection | стилізує виділення тексту |
Приклад з ::before:
css
h1::before {
content: "* ";
color: gold;
}Короткий підсумок
- Псевдоклас (
:), вибирає елемент за станом або положенням - Псевдоелемент (
::), вибирає частину елемента або створює віртуальний елемент
Їх часто використовують разом, псевдокласи для реакцій, псевдоелементи для декору і контенту.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.