Що таке селектор CSS?

CSS використовує правила співставлення зі зразком, щоб визначити, який стиль застосовується до якого елемента в документі. Ці шаблони називаються селекторами, і вони варіюються від імен тегів (наприклад,

п

співставити теги абзацу) з дуже складними шаблонами, які відповідають дуже конкретним частинам документа. Наприклад,

p # myid> b.highlight

відповідатиме будь-якому

б

тег з класом

основний момент

це дитина абзацу з ідентифікатором

моє я

Селектор CSS є частиною виклику стилю CSS, який визначає, яка частина веб-сторінки повинна бути стилізована. Селектор містить одну або декілька властивостей, які визначають стиль вибраного HTML.

Селектори CSS

Існує кілька різних типів селекторів:

• селектори типу - відповідність певному елементу
• селектори класів - співставлення елементів з певним класом
• Селектори ідентифікаторів - співставлення елемента з певним ідентифікатором
• селектори нащадків - співпадаючі елементи, які є нащадками певного елемента
• дочірні селектори - це елементи, які є дочірніми для певного елемента
• універсальні селектори - відповідні будь-якому елементу
• селектори суміжних братів і сестер - співпадаючі елементи, яким безпосередньо передує певний елемент
• селектори атрибутів - співставлення елементів з певним атрибутом або значенням атрибута
• селектори псевдокласів - зіставлення елементів з певним псевдокласом
• селектори псевдоелементів - зіставлення елементів з певними властивостями псевдоелементів

Форматування стилів CSS та селекторів CSS

Формат стилю CSS виглядає так:

селектор {властивість стилю: стиль;}

Розділяйте комами декілька селекторів, які мають однаковий стиль. Це називається угрупованням селекторів. Наприклад:

selector1, selector2 {властивість style: style; }

Угруповання селекторів - це скорочений механізм для збереження компактності ваших стилів CSS. Вищевказане угруповання матиме той самий ефект, що й:

selector1 {властивість style: style;}
selector2 {властивість style: style; }

Завжди перевіряйте свої селектори CSS

Не всі старі браузери підтримують всі селектори CSS. Якщо ви налаштовуєте CSS для використання з такими старими браузерами, як IE8 або старше, не забудьте протестувати ваші селектори в такій кількості браузерів на такій кількості операційних систем, яка, на вашу думку, може використовуватися для доступу до вашого коду. Якщо ви використовуєте селектори CSS1, CSS2 або CSS3 для використання з поточними переглядачами, все буде гаразд.