Від автора: в css класи і ідентифікатори дозволяють прив’язати стилі до будь-яких елементів, але суть їх роботи трохи відрізняється один від одного. Як вони працюють і які особливості їх застосування?
Стильові класи
Класи – це найбільш часто використовувані селектори в css. У більшості випадків прописування стилів різних елементів йде через них. Все тому, що class, на відміну від id, можна задавати багатьом тегам, тому він може бути застосований для стилізації цілої групи блоків. Наприклад:
.center-wrap{
max-width: 960px;
margin: 0 auto;
}
Тепер будь-якого блоку ми прописали class center-wrap, він отримає максимальну ширину 960 пікселів і буде центрований. І ми можемо прописати його і для шапки, і для контенту, і для футера.
Клас взагалі для того і створений, щоб стилізувати групу, а не одиночний блок. Хоча при цьому ніхто не забороняє ставити новий унікальний class тільки одного елемента. Ви цілком можете це робити.
Кілька класів: як це працює?
Стильові класи мають ще одну особливість – їх можна задавати декілька одному html-елемента. Навіть не декілька, а нескінченна кількість, тут ніяких обмежень немає. Наприклад:
Перший може відповідати за кольором, другий – за який-небудь ефект, третій – за розмір. До речі, такий підхід зроблений в css-фреймворках. Наприклад, в Bootstrap. CSS-фреймворк – це вже по суті готові написані стилі і вам залишається лише прописати потрібні властивості елементів.
Якщо обидва класу, які застосовуються до елемента, містять однакову стильове властивість з різним значенням, то застосується те значення, яке записано в таблиці стилів останнім. Наприклад:
.first{
Color: red;
}
.two{
Color: green;
}
В даному випадку текст в блоці буде зеленим, а не червоним, тому що це стильове правило стоїть в таблиці стилів пізніше першого, а значить, замінює його.
Ідентифікатори
Напевно ви зареєстровані в який-небудь соц. мережі? У вашому акаунту там гарантовано є якийсь id. Правда це не має нічого спільного з css-ідентифікаторами, але загальна їх особливість ось у чому – id може бути тільки одним для одного конкретного елемента.
Не можна ставити понад 1 id одному елементу, а також не можна давати один і той же ідентифікатор двом різним елементам. Задається за допомогою атрибута id.
З цього все стає зрозуміло, що ідентифікатор призначений для стилізації одного конкретного елемента. Зазвичай він застосовується по відношенню до великих елементів сайту. Наприклад, до шапці (header), блоку контенту (content), футеру (footer). Тобто це ті елементи, які присутні на будь-якому сайті в однині і не повторюються. Також це може бути головна навігація, бічна колонка, форма коментарів і т. д.
Пріоритетність у стилях
Якщо говорити про пріоритетність в css, то тут ідентифікатор бере верх над класом. Давайте розглянемо приклад:
У нас є 1 блок. Ми задали йому клас і ідентифікатор. Пропишемо стилі:
.green{
color: green;
}
#brown{
color: brown;
}
Якого кольору буде текст в блоці: зеленого або коричневого? Коричневого. І не тому, що ідентифікатор варто в таблиці стилів далі класу. В даному випадку це неважливо, можна було б поставити його перед, але результат все одно був би таким. Все тому, що ідентифікатор можна задати тільки 1. Відповідно, це дуже точна характеристика елемента.
Справа в тому, що для браузера чим точніше селектор, тим він є більш пріоритетним для виконання записаних в ньому властивостей. Наприклад, візьмемо простий селектор тега – p. Він звертається до всіх абзаців на сторінці. Дуже широкий селектор, так як абзаців дуже багато.
Але давайте спробуємо селектор p.right{}. Він вже звернутися лише до тих абзаців, які мають клас right. Тобто їх насправді може бути багато, але у будь-якому випадку їх буде менше, ніж абзаців.
А тепер звернемося, припустимо, до селектору #p-text. Він дуже точний, так як вибере всього 1 елемент, у якого є цей ідентифікатор. Відповідно, ви можете прив’язати до елементу хоч 7 класів і прописати в них стилі, але ідентифікатора вистачить, щоб всі потрібні стилі перевизначити.
Підсумовуємо
Загалом, сьогодні ми досить детально розібрали роботу цих важливих компонентів css, а також для чого вони потрібні. Можу сказати, що стильові класи використовуються зазвичай частіше. Я бачив шаблони, де взагалі використовувалися тільки вони. І це не можна назвати якоюсь грубою помилкою, якщо так подумати.
Стильовий клас ви можете використовувати як для стилізації групи елементів, так і для одного. Ідентифікатор використовується строго для одного елемента. Якщо ви спробуєте один і той же id прописати двом елементам, то це не спрацює. Також можна одному елементу визначати більше одного ідентифікатора – це унікальна мітка, яка може бути тільки в одному числі.
Якщо ми говоримо про пріоритетність, id пріоритетніше класу, а той, у свою чергу, пріоритетніше звичайних селекторів тегів.
Ось такі пироги, друзі. Ще одне можу сказати – без цих речей css просто немислимий, майже всі стилі в каскадних таблицях записуються, прив’язуючись до стильовому класу, або до id. Якщо ви використовуєте редактор коду з підсвічуванням синтаксису, то це можна буде легко побачити.
