Складні css селектори, які містять клас і id елементів
Погляньте на наведені нижче два CSS селектора. Чи зможете ви визначити їх функціональне відмінність:
# header.callout <>
#header .callout <>
На перший погляд вони здаються повністю ідентичними, але якщо придивитися, то верхній селектор написаний разом, а нижній має знак пробілу між #header і .callout. Це, здавалося б, непомітне візуальна відмінність визначає зовсім різне функціональне призначення даних селектор. Перший має незвичний вигляд і тому багато хто сприймає його за помилку, але насправді, він дуже корисний в окремих випадках. Давайте докладніше розглянемо призначення цих двох селекторів.
Верхній селектор # header.callout має наступну інструкцію:
Вибирає елемент, з ідентифікатором header і CSS класом callout.
Нижнього селектору #header .callout відповідає інше визначення:
Вибирає всі елементи, які мають CSS клас callout. які є дочірніми по відношенню до елементу з ідентифікатором header
Сподіваюся, що ця ілюстрація розвіє всі ваші сумніви.
Можливі комбінації імен класів і ідентифікаторів в CSS селекторах.
Особливо корисною з практичної точки зору є можливість складання селекторів з імен класів і ідентифікаторів без пробілів між ними.
Комбінація з ID і імені класу.
Такий вид CSS селектора розглянуто вище. Наведемо лише ще один наочний приклад:
Текст цього заголовка повинен бути червоним.
і відповідний цьому елементу CSS код:
Варіант з декількох імен класів.
В цьому випадку селектор застосовується до елементу, який містить кілька CSS класів. Приклад, наведений нижче, використовує елемент, який має лише два класи, але це не межа:
Використовуємо кілька імен класів
для вибору цього елемента використовуємо такий селектор:
Складні комбінації.
Обмежень по довжині вибудовується ланцюжка з ідентифікаторів і класів при створенні CSS селектора немає, і тому, ви можете використовувати необхідне їх кількість і комбінації. Ось приклад:
Приклад використання.
Яку ж користь можна отримати з таких комбінацій? Доцільність використання складних селекторів для елементів з ідентифікаторами здається дуже сумнівною, так як ідентифікатори, самі по собі є унікальним засобом вибору елементів документа. Вони, хоча і застосовуються рідше, але все ж іноді без них не обійтися. Ось приклад такого селектора, який перекриває стиль для елемента з ідентифікатором:
Другий варіант селектора вибирає той же елемент, але перевизначає колір шрифту, встановлений в попередньому рядку. Він може застосовуватися замість наступного правила:
Більш того, селектор в даному випадку може бути ще точніше, вибираючи потрібний елемент в конкретних умовах.
Селектори, що складаються з декількох імен класів, є більш популярними і корисними. Хочеться звернути особливу увагу на їх застосування в так званому об'єктно орієнтованому CSS стильовому оформленні документів, яке є предметом різноманітних суперечок. Наприклад, у вас є певна кількість блоків
Усі присутні блоки використовують клас box. який може містити властивості, що визначають розмірність елемента або текстуру його фону, загальні для всіх блоків. Крім того, деякі з них містять класи з іменами квітів, які потрібні для визначення кольорової палітри, використовуваної для оформлення елементів блоку (тексту, фону). Наприклад, клас green може встановлювати зелений фон елемента і світло-зелений шрифт тексту всередині нього. Так само в прикладі є блоки, що містять ім'я класу border. який, мабуть, відповідає за відображення кордонів елемента. Ті з них, у яких немає класу border. кордонів не мають.
Тепер давайте визначимо, зазначені в HTML розмітці CSS класи:
Ну що ж, в результаті ми маємо необхідний набір інструментів у вигляді класів, що дозволяють, створюючи нові елементи блоки, оформляти їх відповідним чином - підбирати колір фону, шрифту і при необхідності встановлювати кордон, використовуючи при цьому семантично коректний спосіб. Більш того, ми можемо модифікувати вже наявні класи і створювати їх комбінації, роблячи такий набір більш гнучким і зручним. Наприклад, якщо ви хочете знайти унікальну колір меж тільки для червоних блоків, то це досягається за допомогою наступного уточнюючого селектора:
Застосувавши таке правило, червоні блоки матимуть інший колір меж так як містять обидва класу, певні в селекторі - red і border. На цій демо сторінці можна побачити більше прикладів.
Специфічність розглянутих селектор.
Дуже важливим моментом в даному питанні є той факт, що CSS специфічність наведених в нашому прикладі селектор буде мати однакові значення, як в складному селекторі, з кількома іменами класів, так і в тому випадку, коли обидва класу використовуються окремо. Саме ця особливість і надає розглянутим селекторам здатність перевизначення встановлених раніше стилів, як це видно з попереднього прикладу.