Здрастуйте, шановні читачі блогу . Сьогодні я пропоную продовжити розмову про селектори в Css, який ми почали ще в наведеній статті. Ще раніше ми з вами познайомилися з тим, що таке таблиці каскадних стилів, дізналися, що означають пікселі або EM в розмірах прийнятих в Css і багато іншого.
Всі матеріали по таблиць каскадних стилів, які вже були опубліковані на цьому блозі ви зможете знайти в Довіднику. Сьогодні ж ми поговоримо спочатку про те, як можна комбінувати і групувати селектори, а потім докладно розглянемо пріоритети (що це?) правил, які застосовуються для одного і того ж елемента в Html коді (Important, підрахунок селекторів і запис правил атрибута style).
Комбінації та групування в CSS селекторів
Отже, в попередніх статтях ми встигли розглянути 7 типів:
З цих семи можливих видів у мові CSS можна складати комбінації. Всі комбінації, які ми будемо складати, мають безпосереднє відношення до ієрархії елементів Html коду (предки — нащадки, батьки — діти, брати — сестри).
Перший вид комбінації називається контекстний селектор. Він враховує взаємовідношення елементів Html коду за принципом «Предок — Нащадок»:
Окремі селектори в комбінації записуються через пробіл, а читати її потрібно справа наліво. Т. о. правила CSS будуть застосовуватися тільки до останньої цієї комбінації (самому правому), а все, що стоїть перед ним, лише дозволяє задати більш точне застосування (прицілювання) для наших правил (акцентувати).
У першому прикладі йдеться, що всі елементи B (виділення жирним), у яких предків є елементи Div, будуть пофарбовані в зелений колір.
У наведеному коді тільки підкреслений текст буде пофарбований у зелений колір, оскільки серед його предків є Div, а другий фрагмент коду, виділений тегами B, залишиться того кольору, який вибрано для нього за умовчанням, бо серед його предків контейнера Div вже немає (тільки P і Body):
Такі комбінації працюють в будь-яких браузерах.
Наступним типом комбінацій буде дочірній селектор, який будується на принципах взаємин елементів коду за типом «Батько — Дитина»:
Записуються вони розділяють знаком більше (>):
Дана запис буде трактуватися браузером так: для абзаців (Html тег P), «батьком» (найближчим предком) яких є контейнер Div, буде використовуватися виділення червоним кольором.
У наведеному прикладі лише обведені абзаци будуть пофарбовані в червоний колір, бо вони укладені безпосередньо в контейнер Div, який для них є батьком (найближчим предком). Якщо видозмінити наведений приклад дочірнього селектора на такий:
body > p {color:red}
То червоним вже буде виділений тільки останній абзац, тому що його батьком є тег Body, а два перших параграфа залишаться того кольору, який був передбачений для них за замовчуванням (Body для них предок, але не батько, яким є Div). Дочірні селектори не працюють в браузері Ie 6.
Як і для чого групують селектори в коді CSS
Остання комбінація називається сусідні селектори і відповідає принципам відносин між елементами Html коду за типом «Сестри — Брати». Як роздільник у них може використовуватися або «+», або «~»:
Даний запис означає, що вміст елемента I (виділення курсивом) буде пофарбовано в червоний колір тільки тоді, якщо його найближчим сусідом зліва (зверху за кодом) є елемент B (виділення жирним). Наприклад, дана умова буде дотримано у цьому прикладі:
Якщо записати сусідній селектор в Css код в такому вигляді:
h1 ~ p {color:red}
То це означатиме, що всі параграфи (P), у яких вище за кодом розташований сусідній елемент H1 (заголовок), будуть пофарбовані в червоний колір. Маються на увазі саме сусідні елементи (відносини виду «Сестри — Брати»). На наведеному нижче прикладі заданого селектору будуть задовольняти обведені абзаци:
Комбінації сусідніх селекторів в браузері Ie 6 теж, на жаль, не підтримуються. В Ie 6 підтримується тільки перший вид комбінації, а в Ie 7 і вище підтримуються всі інші. В інших браузерах ніяких проблем виникати не повинно.
Селектори в Css можна ще і групувати. Наприклад, якщо у якихось із них використовується один або кілька однакових правил, то їх можна об’єднати в групу для зменшення обсягу Css коду.
У наведеному на скріншоті прикладі, Css властивості background:yellow» повторюється для кожного селектора заголовка (h1-3), що може викликати складності (багаторазова робота) при бажанні поміняти значення цієї властивості. Тому другий варіант згрупованої запису виглядає трохи краще.
Зверніть увагу, що при групуванні селектори пишуться через кому. Якщо однакових правил буде більше, то і економія коду буде більш відчутною. А ті правила, які були унікальними, потрібно як і раніше записувати індивідуально.
Пріоритети властивостей Css (з important і без нього)
Тепер давайте подумаємо, а яке стильове оформлення буде використовувати браузер, якщо ніяких стилів для даного елемента Html коду не задано? А для цього існує відповідна специфікація валідатора WC3, де все це описано.
Для цього на сторінці зі специфікацією CSS потрібно прокрутити текст до кінця і перейти по посиланню «Default style sheet for HTML 4»:
Як ви можете бачити, зараз відбулося остаточне розділення Html і Css. Тобто навіть для чистого ХТМЛ код браузер все одно буде використовувати стандартні властивості таблиць стилів. Так ось властивості, прийняті за замовчуванням, мають найнижчий пріоритет.
Більш високий пріоритет мають властивості, які призначить користувач в налаштуваннях свого браузеру. Ці стилі будуть застосовані до будь-яких документів, які він переглядає в цьому браузері.
Правда не у всіх браузерів є така можливість, але принаймні, в Ie і Опері вона є. Тобто при бажанні користувач в якості джерела стильової розмітки зможе підключити свій власний файл CSS.
Наприклад, в Ie для цього потрібно вибрати з верхнього правого меню «Сервіс» — «Властивості оглядача», а потім на першій вкладці «Загальні» клацнути по нижній кнопці «Оформлення». У вікні, вам потрібно поставити галочку в полі «Оформляти, використовуючи власний стиль», і за допомогою кнопки «Огляд» знайти на своєму комп’ютері потрібний вам файл стильової розмітки CSS:
Тобто у користувача є можливість змусити будь відкривається в браузері сайт виглядати у відповідності з його вимогами, описаними у файлі CSS. Це називається «користувальницькі стилі» і вони мають пріоритет вище, ніж стилі, які визначені в специфікації за замовчуванням. Але ще більший пріоритет матимуть так звані авторські стилі.
Під авторськими стилями маються на увазі властивості, які підключаються до Html-документа будь-яким з трьох основних способів (тег або атрибут Style в Css, а також зовнішній файл з таблицями стилів).
Тобто, якщо я (розробник сайту) захотів використовувати в оформленні якого-небудь елемента Html коду стилі відмінні від дефолтних (пам’ятаєте, вони описані в специфікації), то користувач своїм власним файлом Css перебити моє оформлення не зможе.
Користувач буде змушений змиритися? Немає. Є у нього можливість підвищити пріоритет своїх властивостей CSS за допомогою додавання Important в кінці кожного з них. Пишеться це слово через пробільний символ і перед ним ставиться знак оклику:
p {color:red !important;}
Якщо у користувача в його власному файлі стилів, який він підключив до браузеру, буде прописано це ж властивість з Important, то всі абзаци він буде бачити в червоному кольорі. Але ж і автор (розроблювач) сайту міг використовувати Important для цього властивості. Хто ж тоді переможе і чий пріоритет виявиться вище?
Вирішили, що користувальницькі стилі з Important будуть мати по-любому більш високий пріоритет, ніж авторські стилі, що з Important, що без нього.
Давайте узагальнимо у вигляді списку всю викладену інформацію з приводу пріоритетів стильових властивостей. Пріоритет буде спадати зверху вниз:
Тобто без Important авторські стилі важливіше, а з них вже користувальницькі стилі найважливіші та пріоритетні. Ну, а тепер давайте розбиратися саме з авторськими таблицями, бо про те, що користувач робить, нам не відомо і покрито мороком.
Як підвищують пріоритети Css властивостей в авторських стилях
Пріоритет авторських властивостей теж повинен підкорятися певним правилам, які дозволяли б розрулити » ситуацію, коли для одного і того ж елемента було б прописано кілька взаємовиключних правил.
Саме зараз ми з вами переходимо до питання каскадного таблиць стилів CSS. Давайте розглянемо це на прикладі, щоб було наочніше. Припустимо, що у нас є фрагмент коду з наступними елементами Html (параграф всередині контейнера Div):
Вміст контейнера
Давайте спочатку пропишемо такі властивості:
p {color:red}
.sbox {background:#f0f0f0}
В результаті буде застосовано і перше з них до параграфу (бо він утворений тегом P), та властивість, що задає сірий фон для елемента з класом «sbox», який знову ж таки є у цього параграфа:
А тепер давайте додамо до другого селектору (класу) ще одна властивість, яка буде конфліктувати з першою строчкою (у них обох задається колір для тексту через color, але значення при цьому використовуються різні):
p {color:red}
.sbox {background:#f0f0f0;color:blue}
У результаті колір тексту параграфа стане синім замість червоного.
Чому? Тому що саме таким способом дозволяється конфлікт, коли один і той же елемент Html коду отримує відразу кілька однакових правил, але з різними значеннями і з різних місць Css коду. Для того, щоб визначити, пріоритет якого вище правила, треба вважати його селектори.
Крім цього самі селектори мають градацію за пріоритетами. Найвищий пріоритет у ID. У цьому прикладі колір тексту буде синім саме тому, що пріоритет Id (#out) буде вище, ніж у селектора тега (p):
p {color:red}
#out {color:blue}
Далі по драбинці пріоритетів, спрямованої вниз, йдуть селектори класів, псевдокласів і атрибутів. У наступному прикладі знову програє тег (p) і колір тексту абзацу буде синім, бо тягается він з селектором більш високого пріоритету (класу):
p {color:red}
.sbox {color:blue}
Ну, і найнижчим пріоритетом (не рахуючи універсальний *, володіє низьким вагою і не вносить ніяких змін у подібні бодання) мають селектори тегів і псевдоелемент.
Але знову ж таки потрібно вважати кількість селекторів одного і того ж рівня пріоритету, і чим їх буде більше, тим пріоритетом буде дана властивість. Наприклад:
div p {color:red}
p {color:blue}
Якого кольору в результаті вийде текст параграфа? Правильно, саме червоного, оскільки у цієї властивості більше селекторів тегів (два проти одного). Про як. Тобто спочатку вважаються Id. Якщо переможець не виявлений, то вважаються класи, псевдокласи і атрибути. Ну, а якщо й там нічого не вирішилося або таких не було знайдено, то вважаються селектори тегів і псевдоелемент.
Але цілком можлива ситуація, коли переможець не виявиться і селектори конкуруючих класів виявляться рівного пріоритету в сумі. Наприклад, для нашого багатостраждального параграфа укладеного в контейнер Div:
Вміст контейнера
Цілком можна буде написати такий Css код:
div.box #out{color:red}
#in p.sbox{color:blue}
І якого ж кольору повинен бути текст параграфа? Обидві комбінації описують саме наш параграф. Першу слід, як і водиться, читати справа наліво: застосувати дані властивості (color:red) для елемента з Id #out, який коштує десь всередині (мати його серед «предків») контейнера Div з класом .box (div.box). Повністю підходить до нашого абзацу.
Друга комбінація: застосувати дані властивості (color:blue) для елемента параграфа з класом sbox (p.sbox), який стоїть всередині будь-якого елемента з Id #in. Знову ж, вона повністю описує саме наш параграф. Давайте вважати селектори.
ID в обох комбінаціях зустрічаються по одному разу, теж саме можна сказати і про класах. Залишається тільки порахувати селектори тегів, але їх теж в обох комбінаціях використовується однакову кількість разів (один). Засідка.
Вийшли рівні пріоритети у одного і того ж властивості, що має різні значення (колір тексту червоний або синій). Як же браузер буде вирішувати цю дилему?
Тут буде діяти правило — хто останній, той і правий. Тому в моєму прикладі колір тексту параграфа буде синім, бо це властивість (color:blue) розташоване нижче коді. Якщо ці правила поміняти місцями:
#in p.sbox{color:blue}
div.box #out{color:red}
У результаті колір тексту параграфа зміниться на червоний. Що і потрібно було довести. Можна дописати, наприклад, до будь-якої комбінації ще один селектор тега і ми перевесим чашу терезів на його користь, навіть якщо вона і не стоїть нижче в коді:
body #in p.sbox{color:blue}
div.box #out{color:red}
В цьому випадку колір параграфа змінитися на синій. Універсальний селектор «*» взагалі ніякого впливу на підрахунок пріоритетів не надає. До речі, трохи вище ми розглянули спосіб підвищення пріоритету Css правил з допомогою додавання Important. У нашому прикладі це може виглядати так:
p {color:green !important}
#in p.sbox{color:blue}
div.box #out{color:red}
Якого кольору буде в цьому випадку текст параграфа? Зеленим, звичайно ж. І навіть вважати нічого не потрібно, бо додавання Important до стильового властивості вирішує це спірне питання однозначно, де б воно в коді не стояло і скільки у нього селекторів не було.
Але Important не є єдиним способом беззастережного підвищення пріоритету властивості. Другий спосіб підвищення може полягати у використанні стильових властивостей атрибута Style потрібного вам Html-елемента.
Тобто прописуєте всередині того ж багатостраждального тега P атрибут Style із завданням будь-якого кольору:
Вміст контейнера
Ну і все. Тепер незалежно від того, які властивості прописані для цього елемента в зовнішньому файлі таблиці стилів або ж всередині тегів Style Html коду, колір тексту параграфа буде жовтим.
Але от властивості з Important він не зможе перебити. Тобто в останньому прикладі, де ми додали правило «p {color:green !important}», колір тексту і раніше буде зеленим, навіть незважаючи на style=»color:yellow».
Насправді пріоритет двох правил (з Important в зовнішньому файлі таблиці стилів атрибута style) рівний, а значить потрібно переходити до підрахунку селекторів. А хіба вони можуть бути всередині атрибута style?
Та ніяких не може бути, а це означає, що правило, прописане в атрибуті style, завжди програє правилом з Important тільки за рахунок меншого числа селекторів (нуль буде менше будь-якого числа).
Ну, а що ж тоді дасть найбільший пріоритет Css властивості? Правильно, його воно буде прописано в атрибуті style так ще з Important:
p {color:green !important}
#in p.sbox{color:blue}
div.box #out{color:red}
Вміст контейнера
В цьому випадку колір тексту параграфа буде жовтим і перебити це вже нічим в авторських стилях буде неможливо. Ми знайшли абсолютний спосіб завдання стилів. Його зможе перебити тільки користувач зі своїм власним файлом стилів і визначеним для цього властивості Important.
Отже, давайте спробує скласти список факторів, що впливають на пріоритет властивості в авторських стилях по мірі їх зменшення:
Насправді правила атрибута style при верстці використовуються вкрай рідко (уявіть собі, як важко буде в цьому випадку вносити зміни у всьому коді сайту, а не в окремому файлі CSS).
Цей атрибут в основному використовують, коли потрібно щось швидко протестувати. Ну, і ще це зручно, якщо ви вставляєте свій код в чужі Html сторінки, які мають своє стильове оформлення і яке може унаследоваться (спадкування в CSS) і для ваших вставлених елементів.
А навіщо і як вставляти свій код на чужі сторінки? Нам може й нема, а Яндекс і Гугл це роблять, коли розміщують оголошення РМЯ або рекламу Гугл Адсенс на чужих майданчиках (наших з вами сайтах).
Додавши в усі елементи коду рекламних блоків атрибут style, з прописаними в ньому властивостями і доданим Important, можна вже не турбуватися про те, що код оголошення буде змінено яким-небудь чином (хоча оголошення Яндекса все ж можна змінювати за рахунок CSS і Important, мабуть вони не використовували цей метод).
На цьому вивчення селекторів можна вважати закінченим, в наступній статті ми вже почнемо розбирати Css правила.
Удачі вам! До зустрічей на сторінках блогу
