Що таке псевдокласи і псевдоелементи в css
отая з CSS і Новомосковський документацію не раз можна зіткнутися з визначенням псевдокласи і псевдоелементи CSS. Давайте розберемося, що це таке.
Як правило, всі стилі CSS. які ми звикли використовувати, застосовуються для елементів, які можна виявити в дереві (структурі) документа. З ними все зрозуміло їх можна побачити в вихідному коді документа і з ними можна взаємодіяти.
Але, є ряд елементів і станів елементів, які не відображаються в дереві (структурі) документа, але до них так само необхідно застосовувати певні стилі CSS.
Наприклад, не існує якогось конкретного елемента, який можна побачити в вихідному коді документа, для першої літери в слові, для області, яка розташовується перед певним елементом, і.т.д.
Крім того, конкретними тегами ми не можемо описати стан елемента, наприклад, відобразити посилання, по якій вже був виконаний перехід, або посилання на яку наведено курсор миші.
Як отримати доступ до таких елементів на сторінці?
Для вирішення цієї проблеми використовуються спеціальні селектори, які називаються псевдоелементи і псевдокласи.
Псевдокласи - це селектори, які визначають стан вже існуючих елементів, яке може змінюватися за певних умов.
Псевдоелементи - це селектори, які визначають областьелементов. яка спочатку відсутня в дереві документа. Ця область створюється штучно за допомогою CSS.
Ключова відмінність між ними в тому, що псевдокласи визначають саме стан елементів, які вже існують на сторінці, а псевдоелементи створюють області (штучні елементи), яких спочатку на веб-сторінці не було. Але і ті й інші відсутні у вихідному коді документа.
Щоб зрозуміти, що саме відносяться до псевдоклас, а що до псевдоелементи, давайте я наведу офіційний список з документації.
Для складання цього списку використовувалися матеріали цієї сторінки Страндарт:
У розділі 4.2. Selector Index наводиться офіційна таблиця.
Отже, список псевдокласів:
Псевдоелементів набагато менше, ось їх список:
Тут, E - елемент, до якого застосовується селектор.
Зверніть увагу, що псевдоелементи пишуться з подвійним двокрапкою. Розробники спочатку зробили таку форму запису, щоб відрізняти їх від псевдокласів. Але, якщо ви запишіть назву псевдоелемента з одинарним двокрапкою, то помилок браузер видавати не буде. Можливо, в майбутньому правила стануть суворішими, але поки стан справ таке.
До речі, якщо вам буде цікаво, я займаюся налаштуванням систем веб-аналітики для сайтів (Яндекс Метрика і Google Analytics).
Якщо ви хотіли б зробити ваш сайт більш ефективним і, щоб він приносив більше грошей, веб-аналітика може в цьому допомогти.
За допомогою інструменту «Цілі» ви можете добитися добрих результатів в цій справі. Детальніше тут.