Page 51 - 6108

Комбінація селекторів
Щоб домогтися більш чіткого вибору елементів для форматування,
можна не обмежуватися завданням одного типу селектора, а використовувати
комбінації селекторів, наприклад:
a [href] [title] – вибере всі посилання, для яких задані атрибути
href і title;
img [alt * = css]: nth-of-type (even) – вибере всі парні
картинки, альтернативний текст яких містить слово css.
Груповання селекторів
Можна застосувати один і той же стиль до кількох елементів, причому
обмежень за кількістю доданих елементів немає. Для цього необхідно в лівій
частині оголошення помістити через кому потрібні селектори, наприклад:

h1, h2, h3, h4 {color: tomato; background: white;}

Принцип каскадування і специфічність правила
Каскадування представляє процес застосування різних правил до одного і
того ж елементу. Більш спеціалізовані правила мають пріоритет над більш
загальними. Якщо у відношення одного і того ж елемента визначено кілька
стилів, то в результаті до нього буде застосований останній з них.
Для кожного правила браузер обчислює специфічність селектора, і якщо
у елемента є конфліктуючі оголошення властивостей, до уваги береться
правило, що має найбільшу специфічність.
Значення специфічності складається з чотирьох частин: 0, 0, 0, 0.
Специфічність селектора визначається наступним чином:
– для id додається 0, 1, 0, 0;
– для class додається 0, 0, 1, 0;
– для кожного елементу і псевдоелемента додається 0, 0, 0, 1;
– для вбудованого стилю, доданого безпосередньо до елементу – 1, 0, 0,
0;
– універсальний селектор не має специфічності.
Приклади CSS правил

h1 {color: lightblue;} / * специфічність 0, 0, 0, 1 * /
em {color: silver;} / * специфічність 0, 0, 0, 1 * /
h1 em {color: gold;} / * специфічність: 0, 0, 0, 1 + 0,
0, 0, 1 = 0, 0, 0, 2 * /
div #main p.about {color: blue;} / * специфічність: 0, 0,
0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2 * /
.sidebar {color: grey;} / * специфічність 0, 0, 1, 0 * /
#sidebar {color: orange;} / * специфічність 0, 1, 0, 0 *
/
li # sidebar {color: aqua;} / * специфічність: 0, 0, 0, 1
+ 0, 1, 0, 0 = 0, 1, 0, 1 * /

В результаті до елементу застосуються ті правила, специфічність яких
більше, наприклад, якщо на елемент діють два правила зі значеннями
специфічності 0, 0, 0, 2 і 0, 1, 0, 1, то виграє друге правило.
Вагу правила також можна задати за допомогою ключового слова
!important;, яке додається після значення властивості, наприклад,