Оригінальна публікація: The Difference Between Pseudo-Classes and Pseudo-Elements in CSS
Псевдокласи та псевдоелементи в CSS — це два типи ключових слів, які можна поєднувати з селекторами. Їх використовують, щоб визначити стан елемента або конкретні частини елемента.
У цій статті ми дізнаємось про різницю між ними, а також їхню історію та найкращі практики використання.
Синтаксис
- одинарна двокрапка
:стосується псевдокласів - подвійна двокрапка
::стосується псевдоелементів
Псевдокласи та псевдоелементи
«Псевдо» означає «несправжній, неправильний, фальшивий». Префікс псевдо- використовують, щоб позначити класи або елементи, які не є «реальними», тобто є не елементами DOM (Document Object Model), а віртуальними елементами, створеними для стилізації.
Щоб краще визначити різницю, давайте детальніше обговоримо відмінності між псевдокласами та псевдоелементами.
Що таке псевдокласи в CSS?
Псевдокласи (:) в основному використовують, щоб стилізувати елементи у різних станах. Стан позначає умову або поведінку користувача (наприклад, hover, active, focus або disabled). Стан зазвичай включає взаємодію з користувачем.
Наприклад, ми можемо задати всім посиланням колір тексту lavender, коли користувач наводить курсор на посилання.
a:hover {
color: lavender;
}
У Chrome DevTools ви знайдете інші приклади станів. Тут ви також можете тестувати та налагоджувати застосовані стилі на основі стану (і відповідного псевдокласу), перемикаючи їх.
Існує понад 50 типів псевдокласів, тому я дуже рекомендую переглянути їх.
Протестуйте код нижче, уважно розгляньте псевдокласи та спробуйте додати новий.
Функціональні псевдокласи
Інший тип псевдокласів — це функціональні псевдокласи. Вони приймають параметр у вигляді списку селекторів, щоб відповідати елементам.
На відміну від інших типів псевдокласів, які орієнтовані на статичні стани (наприклад, hover), ці псевдокласи можуть динамічно цілитись на події та взаємодії з користувачем.
:is()
/* Псевдоклас, який відповідає будь-якому елементу, що відповідає будь-якому з селекторів у наданому списку. */
:not()
/* Псевдоклас заперечення, який представляє будь-який елемент, що не відповідає його аргументу. */
:where()
/* Псевдоклас налаштування специфічності, який відповідає будь-якому елементу, що відповідає будь-якому з селекторів у списку без додавання ваги специфічності. */
:has()
/* Псевдоклас відносності, який представляє елемент, якщо будь-який з відносних селекторів відповідає при закріпленні до прикріпленого елемента. */Що таке псевдоелементи в CSS?
Псевдоелементи (::) використовують, щоб стилізувати певні частини елемента. Їх можуть використовувати, щоб націлитись на першу літеру чи перший рядок або щоб додати вміст перед чи після елемента.
Варто ознайомитися з цим індексом псевдоелементів, щоб дізнатися більше про доступні ключові слова.
Наприклад, щоб перша літера абзацу була великою, можна використати псевдоелемент first-letter:
p::first-letter {
font-size: 9em;
}Ще один поширений приклад псевдоелемента — це використання ::before або ::after, щоб додати вміст перед або після цільового елемента.
Протестуйте код нижче, щоб побачити, як можна використовувати ::before та ::after, щоб створити рядки перед або після текстового елемента.
Різниця між : та :: в CSS
Запам’ятайте, що між одинарною та подвійною двокрапкою ключова різниця. Найголовніше, що : стосується псевдокласів, а :: стосується псевдоелементів.
Історія ::
Історично існувала лише одинарна двокрапка :, яка визначала і псевдокласи, і псевдоелементи. Нотація :: була введена в CSS3, щоб розрізняти їх.
Псевдоелементи та псевдокласи — це пов’язані поняття, які забезпечують різні способи стилізації елемента. Як наслідок, невелика відмінність у синтаксисі між ними є логічною.
Нерекомендовано використовувати лише одинарну двокрапку для обох випадків, оскільки це застаріло. Браузери досі приймають : для обох випадків для зворотної сумісності. Оскільки ви можете стикнутися з обома синтаксисами, розуміння історичного контексту є корисним.
Найкращі практики використання : та ::
Найкраща практика при виборі синтаксису двокрапки — дотримуватись поточних стандартів CSS3. Дотримання цих стандартів покращить підтримуваність коду, тому у своїй кодовій базі корисно зберігати та впроваджувати правила щодо цього.
Це також допоможе захистити CSS у майбутньому. Як ми обговорювали, браузери наразі приймають одинарний синтаксис для обох, але так може бути не завжди. Використовуючи подвійний синтаксис для псевдоелементів, ви можете допомогти запобігти помилкам у майбутньому, оскільки CSS продовжує змінюватися та розвиватися.
Розрізнення синтаксису між ними покращує читабельність. Це прояснює, на що ви цілитесь, і корисно при роботі зі складними селекторами, які включають декілька псевдоелементів і псевдокласів.
Висновок
Для написання підтримуваного CSS важливо розуміти різницю між псевдокласом і псевдоелементом. Псевдокласи використовують, щоб націлитись на стан, а псевдоелементи — щоб націлитись на конкретні частини елемента.
Сподіваюся, ця стаття допомогла зрозуміти різницю між псевдокласами та псевдоелементами, а також їхню історію та найкращі практики використання.
Щасливої стилізації!
Якщо хочете дізнатись більше про CSS, можете знайти мене у твіттері.