Селектор – ім'я класу

Ім'я класу не є яким-небудь стандартним ім'ям елемента HTML-розмітки. Воно визначає опис класу елементів розмітки, які будуть відображатися однаково. Для того, щоб віднести елемент розмітки до того чи іншого класу, потрібно скористатися його атрибутом CLASS:

<STYLE>

. Test (color: white; background-color: black;)

</ STYLE>

...

<P CLASS="test">

Цей параграф ми відобразимо білим кольором на чорному фоні

</ P>

...

<P>

Це <A CLASS="test"> гіпертекстове посилання </ A>

ми відобразимо білим кольором на чорному фоні.

</ P>

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

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

a.menu (color: red; background-color: white;

text-decoration: none;)

a.paragraph (color: navy;

text-decoration: underline;)

У даному прикладі клас гіпертекстових посилань menu має одне опис стилю, а клас гіпертекстових посилань paragraph – зовсім інше. При цьому кожен з цих класів не можна застосувати до інших елементів розмітки, наприклад, параграфом або списком. Якщо ім'я елемента розмітки не задано, це означає, що клас можна віднести до будь-якого елементу розмітки – кореневої клас опису стилів. Це дуже схоже на позначення імені кореневого домену в системі доменних імен. Власне нічого дивного тут немає, тому що система класів об'єктів на HTML-сторінці являє собою дерево. Елементи розмітки – це вузли дерева.