Селектор класу - The Media Image - Website in progress

Опис селектора:

• Завдання, що виконується - вибір всіх елементів на ім'я класу (за значенням атрибута class).
• Позначення - назва класу з попередньою точкою.
• Приклад використання:

Встановимо висоту всіх елементів з класом header (швидше за все - це шапка сайту), що дорівнює 200px.

Докладніше про селектор класу

Розглянутий раніше тип селектора дозволяє визначати стилі для всіх однакових тегів. Наприклад, усіх абзаців (тег p) чи всіх елементів списку (тег li). Як правило, в реальних умовах потрібно призначати стилі за набагато більш гнучкою схемою - припустимо, конкретному тегу div або окремому елементу списку. У цьому випадку можна застосовуватиселектор класу або селектор ідентифікатора.

Селектор класу дозволить застосувати стилі до всіх елементів із певним значенням атрибуту class. Звичайно, попередньо потрібно ці самі атрибути розставити в HTML-коді.

Допустимо, маємо наступний код:

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

Фактично цей запис є скороченим від наступного (я просто прибрав універсальний селектор — це звичайна практика):

Зверніть увагу, що клас можна привласнити відразу кільком елементам:

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

Реєстрозалежність

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

Множинні класи

HTML дозволяє задавати як значення атрибута class список розділених пробілами назв (порядок прямування не має значення). Іншими словами, один елемент може мати відразу кілька класів:

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

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

Крім об'єднання стилів, множинні класи дають нам ще одну цікаву нагоду — вибирати елементи із заданою комбінацією класів. Для цього назви класів у селекторі зазначаються поспіль (без пробілів). Наприклад:

Іноді, такий фінт дозволяє заощадити кілька рядків коду. Але тільки в тому випадку, якщо тобі байдужа підтримка IE6. Так-так, на жаль, цей браузер не розуміє такого запису. Він застосує цей стиль до елементів, клас яких зазначений останнім. Тобто, у нашому випадку, до елементів із класом active. Ослику буде байдуже, чи є у них клас popup. Тож користуватися селекторами багатьох класів потрібно обачно.

Область застосування селектора класів

Концепція класів, один з наріжних каменів у верстці. Тому селектори класу, швидше за все, будуть «найчастішими» у твоєму CSS. Наприклад, дуже правильно верстати сторінку, використовуючи як контейнери теги div, задаючи їм певні класи (відповідно дофункціональним призначенням):

---