Esl дозволяє застосовувати різні стилі до елемента в залежності від його стану (наприклад, при наведенні миші :hover або :visited посилання) через псевдокласи.
Ви також можете застосовувати різні стилі до конкретних частин елемента через псевдоелементи. Наприклад, ::first-letter або ::first-line.
Навчальне відео нижче демонструє, як працювати з псевдокласами та псевдоелементами в Esl (1.3.5+) і як ви можете самостійно додавати псевдоключові слова до Esl:
Псевдокласи та псевдоелементи доступні під час редагування елемента, стилів теми та налаштувань сторінки.
Як редагувати конкретний стан елемента або частину елемента
Натисніть іконку “курсор” у панелі інструментів движка, щоб перемикнути меню псевдокласів:
Натисніть текстове поле, щоб показати всі доступні псевдокласи та псевдоелементи:
Як створити свої власні псевдокласи та псевдоелементи
За замовчуванням Esl показує псевдокласи :hover, :active та :focus, але ви можете додати інші псевдокласи або псевдоелементи самостійно.
Просто введіть псевдоклас або псевдоелемент, який ви хочете створити (наприклад, :visited) і натисніть enter або клацніть маленьку іконку збереження:
Редагувати стилі для станів елементів або частин
Натисніть іконку “курсор” у панелі інструментів движка, щоб відкрити меню псевдокласів. Ще один клік всередині текстового поля відкриває всі доступні псевдокласи та -елементи. Виберіть той, який ви хочете редагувати.
Тепер псевдоключове слово “активний” буде підсвічене у правому куті. Іконка “курсор” панелі інструментів також буде підсвічена, що вказує на те, що ви зараз редагуєте стилі для псевдокласу або псевдоелемента:
На цьому етапі зміна контролів стилів вплине лише на активний псевдоклас або псевдоелемент. Коли ви закінчите редагування, натисніть значок “x” всередині поля вводу, щоб очистити вибір стану.
Після цього ви помітите, що поле вводу показує маленький індикатор того, скільки псевдокласів або псевдоелементів налаштовано для цього елемента або стилю теми:
Щоб очистити стилі, пов’язані з псевдокласом або псевдоелементом, відкрийте випадаючий список, де ви помітите маленький круглий індикатор для станів, які мають зв’язані з ними стилі. Щоб очистити стилі конкретного стану, натисніть на круглий індикатор:
Видалення псевдоключів
Ви можете видалити кастомно додані псевдокласи або псевдоелементи (крім тих, які Esl додає за замовчуванням).
Для цього відкрийте меню псевдокласів, розкрийте випадаючий список, наведіть курсор миші на псевдоключ, який ви хочете видалити. Потім натисніть на значок “смітник”.
Будь ласка, зверніть увагу, що видалення псевдокласу або псевдоелемента видалить його глобально. Це може вплинути на інші елементи або стилі теми, де ви використовували цей стан або частину.
Приклад 1: Стилізувати дочірній клас, коли батько наведений курсором
Припустимо, що є Div, що містить елемент заголовка, і заголовок має клас під назвою text--blue з текстом синього кольору. Тепер ви хочете змінити текст заголовка на інший колір, коли Div наведено курсором.
Для цього:
- Встановіть відступ приблизно 40px з усіх боків для елемента Div, щоб конечний результат було видно.
- Виберіть Div.
- Натисніть на значок “Стану (псевдокласи)”.
- Клікніть у поле вводу.
- Введіть
:hover .text--blueі натисніть Enter або натисніть на значок збереження (дискета). - Залишаючи елемент Div вибраним, перейдіть до СТИЛЬ → ТИПОГРАФІЯ, натисніть на круг значка кольору і встановіть бажаний колір.
Збережіть і перевірте на фронт-енді. Наведення курсора на Div має змінити колір заголовка.
Ресурси (список доступних псевдоключів):
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements