Псевдоелементи та псевдокласи CSS

У попередньому розділі цього розділу було розглянуто чотири типи селекторів – селектори тегів, класів, ID та груп. У цій частині ми перейдемо до селекторів нащадків (які також називаються контекстними селекторами), а також познайомимо вас із псевдокласами та псевдоелементами CSS.

Селектори нащадків

Коли потрібно надати стиль певним тегам на всій веб-сторінці, використовуються селектори тегів. Наприклад, щоб зробити все без винятку посилання непідкресленими, потрібно записати просте правило:

А що робити у тому випадку, коли нам потрібні підкреслені посилання, але тільки тоді, коли вони перебувають у тезі

Якщо говорити простими словами, ми зараз вказали, що всі посилання , які знаходяться в тегах

повинні бути підкресленими. А на решту посилань це правило не поширюється.

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

псевдоелементи
Ієрархія HTML-тегів: родинні зв'язки

Дивлячись на схему, легко зрозуміти споріднені зв'язки тегів - можна сказати, тут все так само, як у людей 🙂 :

  • предком називається той тег, який включає інші теги. У наведеній схемі html - це предок для head і body, а head, у свою чергу, є предком для title і script. Тег body - предок для h1, h2 і p;
  • нащадком називається тег, який розташований в одному або кількох тегах. Наприклад, теги head і body є нащадками тега html, title і script – нащадки і для head,і для html, теги h1, h2 і p - нащадки і для body, і для html, а span - нащадок для p, body і html;
  • батьківським називається той елемент, який знаходиться на один рівень вище щодо іншого. У схемі батьком є ​​html по відношенню до head і body. Тег head – батько тегів title та script. Тег body – батько для h1, h2 та p. А тег p є батьком для span;
  • дочірнім, відповідно, називається елемент, який знаходиться під батьківським елементом. Теги h1, h2, p – дочірні для body. Але при цьому тег span є дочірнім тільки для p;
  • сестрінськими, або сусідніми називаються елементи, які мають спільний батько. Ви, напевно, вже здогадалися, що теги head і body – сестринські. Також сусідніми між собою є теги h1, h2, p.

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

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

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

За допомогою псевдокласів в CSS можна встановлювати стиль для існуючих елементів веб-сторінки, яка буде застосовуватись у разі якихось дій користувача. Псевдоелементи відрізняються тим, що можуть визначати стиль неіснуючого вмісту, а також чітко не позначених елементів.

Популярні псевдокласи CSS

Ви можете надавати елементам стиль, який залежить від стану цих елементів. Ось список деяких псевдокласів:

Як записуються псевдокласи CSS? Необхідно додати стиль із назвою необхідного елемента + ім'я псевдокласу. Приклад:

Популярні псевдоелементи CSS

Якщо псевдокласи записуються з однією двокрапкою, то псевдоелементи – з двома. Це було впроваджено в CSS3 для того, щоб розрізняти псевдокласи та псевдоелементи між собою. Однак раніше цієї різниці не існувало і з псевдоелементами використовувалася одна двокрапка. Наразі браузери підтримують обидва варіанти написання (але не для всіх випадків). Розглянемо деякі псевдоелементи:

  • ::after – використовується разом із властивістю content та дозволяє вивести необхідні дані після вмісту елемента;
  • ::before – виконує схожу функцію, як і попередній, тільки виводить дані перед вмістом елемента;
  • ::selection – цей псевдоелемент розпізнається браузерами тільки при використанні двох двокрапок і дозволяє встановити колір та фон для тексту, виділеного користувачем;
  • ::first-letter – використовується зміни стилю першого символу в тексті елемента;
  • ::first-line – використовується зміни стилю першого рядка тексту елемента.

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

Ми написали стиль для довгих цитат, який додає лапки «ялинки» на початку та в кінці вмісту тега , а також змінює колір та фон виділеного користувачем тексту цитати.

У цьому розділі ви дізналися про такі важливі і часто використовувані в CSS речі, як селектори нащадків, псевдокласи та псевдоелементи. Надалі ми часто до них повертатимемося, тому запам'ятайте основні моменти з пройденої теми:

Завдяки селекторам нащадків вам доступні гнучкі та компактні налаштування CSS-стилів.

Псевдокласи дозволяють створювати стиль різних станів елемента веб-сторінки.

За допомогою псевдоелементів у CSS можна встановити стиль для тих елементів сторінки, які чітко не позначені у структурі документа.

Наступна частина глави – про дочірні селектори.