Приорітети стилів CSS
- 1 (вищий) - inline
- 2 - ID
- 3 - classes, attributes, pseudo-classes
- 4 (нижчий) - pseudo-elements
Для кожного CSS-правила браузер обчислює специфічність (вагу) селектора. Значення специфічності складається з чотирьох рангів. Їхня важливість зростає справа наліво, тобто 1 у лівій колонці — це та сама 1000 балів, а 1 у правій — залишається одиницею. Кожен селектор відповідного класу (4й - пседоелемент, 3 - класс і т.д.) додає одиницю ваги у своє місце приорітету. З таких цифр і вийде ітогова вага приорітета щоб система зьясувала - х якого джерела стилів має найвищий приорітет. Якщо для одного отримувача стилів описано декілька стилів і деякі з них не спіадають (наприклад вв одному бекграунд а у іньшому - розмір шрифта) - то такі властивочті обїеднуються.
Приклад - Колір тексту посилання буде коричневим, тому що специфічність п'ятого правила вища.
/* Специфічність - 0 0 0 1 */ a { color: green; } /* Специфічність - 0 0 1 0 */ .post-link { color: orange; } /* Специфічність - 0 0 1 1 */ a.post-link { color: blue; } /* Специфічність - 0 0 2 0 */ .post > .post-link { color: red; } /* ✅ Специфічність - 0 0 2 1 */ .post > a.post-link { color: brown; }
Якщо специфічність однакова, перемагає правило, розташоване нижче в CSS-коді, тобто останнє по порядку з конфліктуючих.
/* Три селектори елемента з однаковою специфічністю */ a { color: teal; } a { color: brown; } /* Це правило стоїть нижче, отже до всіх посилань застосовується помаранчевий колір тексту */ a { color: orange; }
!important
Специфічність правила можна підвищити за допомогою ключового слова !important, якщо додати його після значення властивості. Вкрай не рекомендується використовувати !important в сучасній розробці. Єдиним прийнятним випадком є перевизначення значення властивості, якщо немає прямого доступу до файлу зі стилями, наприклад, стиль бібліотеки.
p { color: orange !important; }
inherit
Якщо необхідно, щоб у пості посилання було того ж кольору як і весь текст, можна використовувати спеціальне значення inherit для властивості color, щоб не дублювати колір у двох місцях.Значення inherit повідомляє браузеру, що елементу необхідно успадкувати значення властивості від батьківського елемента.
.post { color: green; } .post-link { color: inherit; }
currentColor
Для посилань зазвичай використовується ключове слово currentColor (поточний колір) у HTML. Мета — щоб колір тексту посилання успадковувався від секції.
<section class="post"> <h1>Lorem ipsum dolor sit</h1> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi, veritatis nihil alias iste odit similique sit eius optio veniam, impedit cumque fuga facere labore quo id necessitatibus quaerat rerum. </p> <a href="" class="post-link">Read more...</a> </section> .post { color: green; } .post-link { color: currentColor; }