Контекстуальні селектори

Контекстні селектори - це сполучення декількох звичайних селекторів. Стиль задається тільки елементам у заданій послідовності в залежності від каскадного порядку.

ПРИКЛАД:

Р EM {color:silver;}

У даному прикладі всі елементи ЕМ усередині елементів Р будуть мати заданий стиль.

Надання декільком елементам однакових властивостей:

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

Приклад:

hi,h2,h3,p,strong {color:green; font-style:italic;}

Bci елементи hi, h2, h3, p i strong будуть зеленими.

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

Синтаксис: селектор: псевдоклас { властивості } селектор.

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

властивості } селектор.клас:псевдоелемент {властивості}

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

Список псевдокласів і псевдоелементів:

Anchor Pseudo Classes - ці псевдокласи елемента <а href=" ">, що

позначає посилання. Псевдокласи цього елемента: Нпк(посилання), active (активне посилання), visited (відвіданий раніше URL), hover (псевдоклас, що виникає при піднесенні курсору до посилання, не працює в Netscape). First Line Pseudo-element - first-line. Цей псевдоелемент може бути використаний із block-level елементами (р, hi i т.д.). Він змінює стиль першого рядка цих елементів. First Letter Pseudo-element - first-letter. Схожий на first-line, але впливає не на весь рядок, а тільки на перший символ.

Приклад:

a:link, arvisited {colorrblue}

aractive {colorrred}

arhover {text-decoration:none}

У даному прикладі всі елементи Anchor (посилання) будуть синіми. При натисканні (в активному стані) поміняють цвіт на червоний, а при підведенні курсору мишки зникне підкреслення.

Примітка:

Описи декількох властивостей для одного селектора, контекстуального селектора, класу, індивідуально іменованого стилю або групи об'єднаних селекторів відокремлюються друг від друга крапкою з комою.