Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке псевдоелемент? Чим псевдоелемент відрізняється від псевдокласу?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Псевдоелемент** (`::`, наприклад `::before`, `::after`, `::first-letter`) стилізує частину елемента або створює віртуальний елемент, якого немає в HTML, на відміну від **псевдокласу** (`:`), який описує стан чи положення елемента. **Ключове:** їх часто поєднують: псевдокласи для реакцій на дії, псевдоелементи для декору і контенту.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Псевдоелемент**, це селектор, який дозволяє **вибрати і стилізувати певну частину елемента або створити віртуальний елемент**, якого немає в 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; } ``` --- ### **Короткий підсумок** - **Псевдоклас (**`:`**)**, вибирає елемент **за станом або положенням** - **Псевдоелемент (**`::`**)**, вибирає **частину елемента або створює віртуальний елемент** Їх часто використовують разом, псевдокласи для реакцій, псевдоелементи для декору і контенту.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.