Псевдокласи та псевдоелементи в CSS (hover, before, first-child та інші) WEBCodius

Вітаю Вас, шановні читачі блоґу. Сьогодні продовжимо тему вивчення каскадних таблиць стилів. В одній з попередніх статей ми розглядали спеціальні селектори CSS, але розглянули тільки частину з них. І на черзі у нас залишилися селектори псевдокласів та псевдоелементів.

Псевдоелементи

Псевдоелементи - різновид спеціальних селекторів, що прив'язують стиль до певного фрагменту елемента Web-сторінки, а також вони можуть генерувати вміст, якого немає у вихідному HTML коді. Таким фрагментом може бути перший символ або перший рядок абзацу.

Псевдоелементи використовуються не власними силами, а лише в сукупності з основними селекторами:

Спочатку слідує ім'я основного селектора, потім пишеться двокрапка, після якої йде ім'я псевдоелемента.

Далі розглянемо деякі псевдоелементи та його властивості.

:first-letter

Прив'язує стиль до першої літери тексту в елементі веб-сторінки, якщо їй не передує вбудований елемент, який не є текстом, наприклад зображення. Це дозволяєстворювати в тексті буквицю (збільшена перша літера, базова лінія якої нижче на один або декілька рядків базової лінії основного тексту) івиступаючий ініціал (збільшена велика літера, базова лінія якої збігається з основною лінією основного тексту).

Розглянемо застосування first-letter з прикладу створення виступаючого ініціалу:

І результат прикладу:

псевдоелементи

Як видно на скріншоті, перша буква абзацу стала вдвічі більшою і змінила колір на червоний.

Псевдоелемент :first-line прив'язує стиль до першого рядка тексту в елементі веб-сторінки. Подивимося дію псевдоелемента :first-line на абзац тексту:

псевдокласи

:after та :before

Псевдоелементи after і before застосовується для вставки контенту після та перед вмістом елемента. Ці псевдоелементи працюють спільно з стильовою властивістю content , яке визначає вміст для вставки.

псевдокласи

Як бачимо в кінці кожного абзацу вставлений текст webcodius.ru, як і прописано в css правилі в властивості content. Якщо місце «after» поставити «before», то текст вставитися на початку абзацу.

Псевдокласи

При описі css правил псевдокласи зазвичай використовують разом із основними селекторами:

Якщо псевдоклас вказується без селектора попереду (:hover), він застосовується до всіх елементів сторінки.

Псевдокласи умовно поділяються на три групи:

  • визначальні стан елементів;
  • що мають відношення до дерева елементів;
  • вказівки мови тексту.

Псевдокласи, що визначають стан елементів

Псевдокласи цієї групи визначають стан елемента html сторінки та застосовують стиль лише для певного стану. Зазвичай псевдокласи станів використовуються для гіперпосилань, але іноді їх застосовують і для інших елементів веб-сторінки.

Псевдоклас:visited визначає зовнішній вигляд відвіданих посилань, тобто. посилань якими користувач вже клацнув. За замовчуванням такі посилання змінюють свій колір на фіолетовий, але за допомогою цього псевдокласу колір та інші параметри можна змінити.

Псевдоклас:active застосовується до активних елементів. Наприклад, для активації посилання необхідно навести на неї курсор і клацнути мишкою.

Псевдоклас:focus застосовується до елемента при отриманні фокусу. Наприклад, поле текстового введення отримує фокус, коли в нього встановленокурсор.

І останній псевдоклас:hover застосовується до елемента, коли на нього наведено курсор миші, але клацання не відбувається.

Для прикладу подивимося, як виглядатимуть посилання в різних станах:

first-child

Псевдокласи структури документа

За допомогою цієї групи псевдокласів стилі прив'язуються до елементів залежно від їхнього положення в структурі документа.

Першими розглянемо псевдокласи:first-child та:last-child, які прив'язують стиль до елементів селектора, які є відповідно першим та останнім дочірнім елементом свого батька. Щоб стало зрозуміліше, розглянемо ці псевдокласи на прикладі маркованого списку:

Результат прикладу:

псевдоелементи

У цьому прикладі за допомогою правила CSS li:first-child ми говоримо браузеру, що стиль необхідно застосувати до елемента li, який йде першим у своєму батьківському елементі. А за допомогою селектора "li:last-child" елемент має бути останнім. Таким чином, за допомогою властивостей css для налаштувань відображення шрифтів ми вказали, що перший елемент списку повинен бути виділений жирним шрифтом, а в останнього елемента встановили шрифт червоного кольору.

Наступний псевдоклас:only-of-type, який застосовується до дочірнього елемента зазначеного типу, тільки якщо він єдиний у свого батька.

псевдоелементи

У прикладі псевдоклас: only-of-type застосовується до елемента, у правилах стилю якого розмір шрифту збільшується вдвічі. Розмір шрифту збільшується тільки у гіперпосилань, які у своїх батьків (у даному випадку це тег

) зустрічаються лише один раз.

Псевдоклас:nth-child дозволяє прив'язати стиль до елементів Web-сторінки на основі їх нумерації в дереві елементів:

Після імені цьогопсевдокласу в дужках може бути зазначено чотири можливі варіанти:

  • odd - стиль буде прив'язаний до всіх непарних елементів, що задовольняють значення;
  • even означає всі парні елементи;
  • число - позначає порядковий номер дочірнього елемента щодо свого батька (нумерація починається з 1 - позначає перший елемент);
  • вираз - задається у вигляді формули an + b, де a і b цілі числа, а n лічильник, який набуває значення 0, 1, 2.

Наприклад,як виділити всі парні рядки таблиці кольором? І тут ідеально допоможе псевдоклас :nth-child:

псевдоелементи

У коді приклад запис tr:nth-child (2n) означає, що стиль необхідно прив'язати до всіх елементів tr, за допомогою яких формуються рядки таблиці (про це ми говорили в статті як вставити таблицю на html-сторінці). Причому порядковий номер рядків щодо батьківського елемента table має задовольняти формулі 2n, у якому браузер замість n підставляє цілі числа 0, 1, 2. У результаті виходить, що стиль застосовується до рядків під номерами 2, 4, 6 тощо.

Псевдокласи :not і *

Залишилося розглянути ще два важливі псевдокласи. Спеціальний псевдоклас :not дозволяє прив'язати стиль до будь-якого елемента web сторінки, що не відповідає заданим умовам. Такою умовою може бути будь-який селектор:

Стиль буде прив'язаний до елементів веб сторінки, що задовольняє основний селектор і не селектор вибору, що не задовольняє. Наприклад:

В результаті цього css правила, текст всіх заголовків h1 пофарбуються в червоний колір, крім того, у якого атрибут id буде дорівнює main.

І останній на сьогодні псевдоклас* («зірочка»), який означає будь-який елемент html сторінки. Він може знадобитися ву випадку, якщо необхідно встановити одночасно один стиль для всіх елементів веб-сторінки, наприклад, встановити шрифт або зображення тексту. Синтаксис:

Наприклад, щоб встановити розмір тексту для всіх елементів документа, можна використовувати наступне правило css:

На цьому все до нових зустрічей на сторінках блогу!