Введення в селектори CSS, для початківців
урок №9
Селектори CSS для початківців
Селектори - одна з найважливіших тем в мові CSS, на цьому сайті, є навіть спеціальний розділ присвячений їм, а в цьому уроці ми лише трохи ознайомимося з ними.
Селектор (від лат. Selector) - вибірка, сортування.
Як вам уже відомо, мова CSS призначає елементам сторінки (заголовкам, абзаців і т.д.) різні властивості, але перш ніж призначити якому-небудь елементу сторінки CSS-властивість, його потрібно спочатку вибрати.
Наприклад, якщо ми хочемо змінити що-небудь у абзацу, ми пишемо його ім'я p і все абзаци на сайті змінюються. Але що робити, якщо ми хочемо змінити не всі абзаци сторінки, а тільки деякі з них? Для цього нам на допомогу прийдуть селектор класу або селектор унікального ідентифікатора.
Основних селекторів існує три види, це:
1. селектор тега. просто ім'я тега, до цього ми працювали тільки з ним.
2. селектор класу. це коли тегу призначається атрибут class = "імяКласса" і по його імені можна вибрати елемент, одне і теж ім'я класу може бути призначено декількох тегами.
3. селектор унікального ідентифікатора. це коли тегу призначається атрибут id = "імяУнікальногоІдентіфікатора" і по його імені можна вибрати елемент, одне і теж ім'я унікального ідентифікатора може бути призначено лише одного тегу на сторінці.
Селектори в CSS-коді
Розглянемо приклади використання різних селекторів:
В CSS-коді, ім'я класу має починатися з точки. а унікального ідентифікатора з решітки #.
Схема CSS-коду
Якщо до цього, ми схему CSS-коду записували так:
То тепер, її можна записати так:
Де в якості селектора може виступати:
1. ім'я тега: h1. p і т.д.,
2. ім'я класу. імяКласса і
3. ім'я унікального ідентифікатора: # імяУнікальногоІдентіфікатора