Пріоритетність або cпеціфічность правил в таблиці стилів потрібна браузеру тільки в тому випадку, коли одному html елементу на сторінці задані два або більше правила в css. намагаються змінити одні і ті ж властивості цього елемента, наприклад колір тексту. В такому випадку браузеру необхідно вирішити, яке з правил застосовувати, для цього він визначає сумарну вагу селектор, через які ці правила задані і далі діє двома шляхами:
- Застосовує то правило. вага селектор якого більше.
- Якщо вага селектор у всіх правил однаковий, застосовує правило, яке знаходиться нижче всіх в коді css.
Вага селектор в css
Вага селектор, його також називають специфічністю, браузери визначають за дуже простою схемою. Вага кожного селектора можна представити у вигляді групи з 4 незалежних чисел:
Кожен селектор, наприклад a або .header. додає по одиниці в один з цих 4 рядів, в залежності від свого типу.
Приклади розрахунку пріоритетності:
В такому числовому ряду крайня права цифра має найменшу вагу, а крайня ліва цифра - найбільший. Це означає що навіть одиниця в 2-му ряду справа більше, ніж будь-яка за величиною цифра в першому. Тобто:
0,0,1,0 більше ніж 0,0,0,5 а 0,1,0,0 більше ніж 0,0,2,5
У таблиці нижче показано в який ряд додає одиницю кожен з існуючих типів селекторів
Таблиця розподілу ваг селектор
Універсальний селектор * - Не має ваги по відношенню до інших селекторам, нічого не додає - 0,0,0,0
Селектори тега (наприклад div), а також псевдоелементи (наприклад: after) - 0,0,0,1
Селектори класів (наприклад .box), селектори атрибутів (наприклад a [title = "Головна сторінка"]), а також псевдокласи (наприклад: hover) - 0,0,1,0
Ідентифікатори (наприклад #modal) - 0,1,0,0
Правила, написані елементу безпосередньо через атрибут style = "" (інлайновие) - 1,0,0,0
Псевдоклас: not сам не має ваги, а от вага селектор, які є його аргументами (наприклад input: not ([type = "submit"])) вважається як зазвичай.
Символи, що позначають відносини селектор + (сусідні селектори),> (безпосередній дочірній елемент) і
(Родинні селектори) не враховуються, їх вага дорівнює 0
Правила, написані елементу в тегах нічим не відрізняються від звичайних підключаються стилів (style.css наприклад), браузери не роблять різниці між правилами з цих двох джерел, не дають привілеїв нікому з них.
Приклади всіх можливих поєднань типів селекторів (з вагою):
Інші елементи, що управляють відображенням
Стилі браузерів за замовчуванням (user agent styles. У кожного браузера свої, включаються тільки якщо елементам не задано жодних стилів) - мають найменший можливий пріоритет серед усіх стилів.
Атрибути тегів, що відповідають за відображення елементів, такі як width = "" або height = "" - сильніший user agent стилів, але слабкіше будь-яких селектор. Їх можна перебити навіть за допомогою універсального селектора *.
Ось простий приклад підрахунку специфічності селекторів: ми маємо span. якому задані два протиборчих правила:
В даному випадку специфічність першого правила дорівнює 0,0,0,1, а специфічність другого - 0,0,1,1, так як у другому правилі той же span визначається через батька по класу .parent1.
Вага селектор обох правил дорівнює 0,0,0,1, тому застосовується правило color: red. що йде в коді нижче.
Тут застосовується саме перше правило, не дивлячись на те, що друге йде в коді css, нижче, так, як вага першого правила (0,0,3,1) більше ваги другого (0,0,1,1).
Колір тексту в результаті буде green, так як інлайновий стиль сильніше звичайних. Вага звичайного правила - 0,1,0,2, вага інлайнового правила - 1,0,0,0
Правило! Important
На відміну від селектор. important використовується не для всього правила, а для кожного окремого властивості, щоб, не дивлячись на вагу селектор інших правил, це властивість було точно застосовано до елементу.
Незважаючи на те, що специфічність першого правила більше, властивість color все одно застосовується з другого правила, так як йому призначено! Important. і вага селектор інших правил йому не важливий. При цьому властивість font-style все одно залишиться italic. так як вага селектор першого правила більше, а то ж властивість у другому правилі не позначене як особливо важливе (! important).
Положення в коді також не має значення для властивостей с! Important. якщо! important для властивості цього елемента призначений всього один. Записавши так:
отримаємо теж значення color: red.
Все змінюється, якщо одній властивості задані два або більше правила! Important. В такому випадку вага селектор знову починає враховуватися, а в разі, якщо він однаковий, враховується і положення в коді.
В даному випадку таким чином, застосовується властивість color: blue. так як вага селектор його правила більше.
Знову ж застосується властивість color: blue. так як специфічність правила вище, і послідовність правил в такому випадку не має значення.
Якщо ж вага правил дорівнює:
Таким чином, застосовується те, що йде останнім.
В даному випадку таким чином, застосовується правило color: red! Important. так як властивість з правилом! important має більшу вагу ніж інлайновие стилі, що не мають такого правила.
Тут спрацює інлайновое правило color: green! Important. так як інлайновие властивості з правилом! important мають найбільший можливий вага.
Пріоритетність успадкованих стилів
Важливо відзначити, що вага стилів, успадкованих елементами від батьків, завжди дорівнює нулю, його легко перебити за допомогою звичайного селектора тега, наприклад a або div. навіть, якщо в правилі, призначеному батькові, буде! important.
Також важливо знати, що успадковані стилі можна перевизначити і за допомогою універсального селектора *. Незважаючи на те, що специфічності селектора * і успадкованих стилів дорівнюють нулю, специфічність * насправді завжди вище ніж у успадкованих стилів.
В обох випадках до span'у застосовується color: green. так як будь-яке правило перебиває вага успадкованих властивостей.
Це справедливо навіть якщо стилі задані батькові елемента безпосередньо через атрибут style. і навіть з правилом! important. їх вага по відношенню до дочірніх елементів все одно буде дорівнювати нулю.
Результат: в обох випадках у span'а спрацює властивість color: green.
Це все особливості специфічності правил в css, які необхідно розуміти для якісної верстки. Спочатку може здатися, що іншого шляху, як зазубрити це все просто немає, проте всі ці принципи досить прості, і на практиці швидко складаються в одну загальну систему.
- Bootstrap
- CSS