Page 50 - 6108
P. 50
– Сестринський селектор. Сестринські відносини виникають між
елементами, що мають загального батька. Селектори сестринських елементів
дозволяють вибрати теги з групи елементів одного рівня.
h1 + p – вибере всі перші абзаци, що йдуть безпосередньо за будь-яким
тегом <h1>, не зачіпаючи решта абзаців.
h1 ~ p – вибере всі абзаци, які є сестринськими по відношенню до будь-
якого заголовку h1 і йдуть після нього.
– Селектор Атрибута. Селектори атрибутів дозволяють форматувати
елементи на основі вибірки будь-яких містяться в них атрибутів або значень
атрибутів, варіанти:
[атрибут] – вибирає всі елементи, для яких заданий вказаний атрибут.
img [alt] – вибирає всі картинки, що містять атрибут alt.
img [title = "flower"] – вибирає всі картинки, назва яких містить
слово flower.
– Псевдоклас. Псевдокласи – це класи, що фактично не прикріплені до
тегів html-коду. Вони викликають CSS-правила при вчиненні тої чи іншої події
або підкоряються певному правилу:
a: link – посилається на невідвідуване посилання.
a: visited – посилається на вже відвідане посилання.
a: hover – посилається на будь-який елемент, над яким проводять
курсором миші.
a: focus – посилається на будь-який елемент, над яким знаходиться
курсор миші.
a: active – посилається на елемент, який був активізований
користувачем.
– Структурні псевдокласи. Структурні псевдокласи форматують дочірні
елементи відповідно до зазначеного параметра в скобці, варіанти:
:nth-child(odd) – вибирає непарні дочірні елементи.
:nth-child(even) – вибирає парні дочірні елементи.
:nth-child(3n) – вибирає кожен третій елемент серед дочірніх.
Структурні псевдокласи типу. Дозволяють вказати на конкретний тип
дочірнього тегу:
:nth-of-type() – вибирає елементи за аналогією з :nth-child(), при
цьому бере до уваги тільки тип елемента.
:first-of-type – дозволяє вибрати перший дочірній елемент.
:last-of-type – вибирає останній тег конкретного типу.
:nth-last-of-type() – вибирає елемент заданого типу в списку
елементів відповідно до зазначеного місцеположенням, починаючи з кінця.
:only-of-type – вибирає єдиний елемент зазначеного типу серед
дочірніх елементів батьківського елементу.
– Псевдоелементи. Псевдоелементи використовуються для додавання
вмісту, який генерується за допомогою властивості content, і для зміни
зовнішнього вигляду частині елементу:
:before – вставляє згенерований вміст перед елементом.
:after – додає згенерований вміст після елемента.