CSS-селектори та їхні види

CSS-селектори та їхні види

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

Селектор CSS за тегом і класом

Найпростіші селектори - за тегом і за класом. Селектор за тегом найбільш спільний і вибирає всі елементи з певним тегом. Наприклад, можна написати у властивостях CSS-код такого виду: «p {color: blue} ", де" p "- тег абзацу, а властивість" color: blue "позначає колір тексту. У результаті текст у всіх абзацах пофарбується у синій колір. Селектори за тегом можна перерахувати через ком, тоді не потрібно буде писати властивість двічі.

Якщо деяким абзацам присвоїти якийсь клас, наприклад "blue", тоді спрацювання селектора CSS можна налаштувати ще більш точно. Але його запис у властивостях буде відрізнятися - перед назвою класу з 'явиться крапка. Тобто, щоб вибрати всі абзаци, яким присвоєно клас "blue" і пофарбувати їх в синій колір, потрібно у властивостях CSS написати такий код: «.blue: {color: blue}». Цей селектор більш специфічний, ніж CSS-селектор за тегом, і сильніший за нього, але відноситься до найпростіших. Існують і більш складні правила, що дозволяють вибирати невеликі групи елементів.

Особливості селекторів за ідентифікатором

Селектори за id або за ідентифікатором більш специфічні, ніж за класом і за атрибутом. Тобто при використанні в каскаді вони будуть "переважувати" інші подібні селектори. Ідентифікатори також допомагають точно вибрати певний елемент у коді, але їх використання при оформленні сторінок вважається поганою практикою серед верстальників. Тільки в дуже рідкісних випадках, наприклад при створенні слайдера на CSS, така практика допустима. Справа в тому, що в межах однієї сторінки може бути тільки один елемент з певним id. Отже, через унікальність селектора CSS за id він може використовуватися тільки для одного-єдиного елемента. У цьому випадку набагато логічніше використовувати класи, а не ідентифікатори.

Різні думки про селектор з id

Але існує й протилежна думка, що ідентифікатор допомагає визначити той фрагмент коду на сторінці, який повинен бути в єдиному екземплярі. При цьому, хоча селектори за класами можуть замінити його, вони повинні використовуватися для великих груп елементів, а в тих місцях, де потрібна точність, краще використовувати id. Кожен верстальник має право виробити свою особисту думку з цього питання і писати код у своїй власній стилістиці. При написанні селектора за id перед ним використовується символ "#". Тобто рядок коду буде виглядати так: «#blue: {color: blue}». При такому записі буде пофарбовано у синій колір елемент з ідентифікатором "# blue".

Використання каскаду

При використанні в HTML селекторів CSS за id можна також використовувати властивість каскадності. Наприклад, якщо всередині тегу з ідентифікатором потрібно вибрати якийсь дочірній тег і змінити його властивості, спочатку потрібно записати ім 'я ідентифікатора з ґратами, потім дочірній тег і його властивості. Такі селектори називаються вкладеними. Тобто рядок коду буде виглядати приблизно так: «#id p {color: blue}». Тоді всередині батьківського елемента з цим ідентифікатором у дочірнього абзацу колір тексту змінюється на синій.

Використання селекторів дочірніх елементів

Ще один варіант використання каскаду для зміни властивостей дочірніх елементів використовується, якщо потрібно вибрати тільки певну частину коду. Його також називають селектором нащадків. Наприклад, щоб вибрати абзац всередині якогось рядка таблиці, використовується наступний запис CSS селектора: «ul li > p: {color: blue}». Варто звернути увагу на те, що чим довший запис, тим вища ймовірність, що вийде змінити якусь конкретну властивість елемента, так як він стає більш пріоритетним для каскаду. Наприклад, елементи з якоюсь іншою властивістю CSS-селектора за класом, який є батьківським, не змінить свої властивості повністю. Перефарбовує лише певну частину тексту у списку.

Селектор сестринських елементів

Ще один цікавий спосіб використання каскадності - сусідні селектори CSS. Записуються вони як сума селекторів: «span + a {color blue}». При цьому сусідом вважається той, під яким є ще один, що підходить під потрібні параметри. Таким чином, якщо в коді є три елементи, то до першого з них властивість не застосується, тому що у нього немає сусіднього, а до всіх наступних - так. Так відбувається через значок суми, коли складаються наступні селектори, а не попередні. Такий запис допомагає скоротити код і не записувати кілька CSS-селекторів для різних тегів, застосовуючи до них однакові властивості. Якщо другому елементу списку задати додатково ще й клас, а запис змінити на ".class + a {color blue}", тоді відлік піде від нього і властивості зміняться у наступних відповідних під правило елементів, а два перших залишаться колишніми.

Тепер припустимо, що в нашому коді є три однакові теги з різними класами і потрібно вибрати всі елементи після якогось певного. У цьому випадку не допоможе застосування лише селекторів тегів CSS. Для цього використовується селектор такого виду: «.class ~ div». При цьому вибираються елементи з тегом div, які йдуть після зазначеного класу. Якщо ми хочемо вибрати не тільки елементи з тегом div, але і всі наступні, замість тега після знака тильди потрібно поставити символ зірочки - "*". Такий запис означатиме, що потрібно вибрати все, що слід після заданого класу. Можна вибрати всі елементи на сторінці, якщо залишити як селектор тільки зірочку.

Селектори за атрибутом CSS

Припустимо, що в нашому коді присутні елементи з якимись атрибутами, але всі вони відрізняються один від одного і написані через дефіс, а нам потрібно вибрати всі ті, у яких назва класу починається з певного слова, наприклад "selector", і класи розділені знаком "-". Що потрібно робити в цьому випадку? Запис селектора починається з квадратних дужок, куди спочатку записується назва атрибута, потім вертикальний шар, знак "=" і "selector": «data- |= selector». Далі пишемо потрібну властивість, яку хочеться змінити. У результаті вибереться елемент з заданими параметрами. Змінюючи класи, можна змінювати і властивості певних частин коду. Якщо ж імена класів записані не через дефіс, а одним словом, тоді їх теж можна вибрати, але використовуючи трохи інший запис. У цьому випадку вертикальний шар замінюється символом "^": «data^ = selector». Такий селектор вибирає підрядок з початком назви класу.

Як вибрати елемент з певним закінченням у назві класу

Тепер вчинимо інакше і виберемо частини коду не за початком опису класу, а за останніми літерами в його назві. Для цього нам знадобиться значок долара. Ставимо його на місце галочки, а після знака рівності пишемо закінчення назви класу: «data$ = ctor». Тепер елементи з цим поєднанням букв будуть обрані і до них застосовані певні властивості. Ви можете вибрати будь-який атрибут. Розберемо, як вчинити, якщо нам потрібно знайти елемент з якимось буквосполученням в середині слова. У цьому випадку міняємо знак долара на зірочку, а після знака рівності пишемо потрібні літери: «data* = ct».

Псевдокласи - особливі селектори

Для посилань зазвичай використовуються спеціальні селектори стилів CSS, які відображають різні їх стану: спокійне, у фокусі, активне, пройдене - вони називаються псевдокласами. Псевдоклас для активного посилання, на яке наведено курсор, пишеться так: «а:active». Далі йдуть якісь властивості, найчастіше змінюється фон або додається тінь. Якщо ви додаєте цю властивість для посилання і клацнете її, вона змінює свій колір на вказаний колір. Ще один псевдоклас - hover показує, що посилання вже пройдено. Записується він так: «a:hover».

Особливості станів active і focus

Active часто плутають з іншим станом - focus. Записується воно так: «a:focus "і позначає активний стан кнопки при роботі з клавіатури. Тобто, якщо використовувати клавішу TAB, активне посилання буде виділятися особливим кольором. Цю властивість потрібно використовувати, оскільки користуватися мишкою для навігації по сайту можуть не всі користувачі. У деяких може бути слабкий зір або інші обмеження щодо здоров 'я, тому переміщуються вони по сторінці за допомогою клавіш або спеціальних пристосувань. Ігнорування стану кнопки у фокусі є великим мінусом для такого параметра в дизайні сайту, як доступність, і справляє значний вплив на його відвідуваність особливою категорією користувачів. При звичайній навігації за допомогою мишки посилання стає одночасно активним і у фокусі. Тому при стилізації елементів важливо звертати увагу на це.

Псевдоелементи

Псевдоелементи дозволяють задавати особливі стилі без його визначення в самій структурі HTML. Записуються вони так: назва селектора, знак "::", ім 'я псевдоелемента. Найбільш поширені елементи "before" і "after". У них є властивість "content", вони не можуть застосовуватися до внутрішніх стилів. "After" потрібен для додавання якогось контенту після вмісту певного елемента. Що саме потрібно вставити, записується у властивість "content". Подібним чином псевдоелемент "before" додає контент перед вмістом елемента. Використання цих особливих селекторів дозволяє скоротити код і не писати кожен раз нову структуру для якоїсь його частини, якщо потрібно додати невелику деталь в певне місце контейнера. Вони дуже часто використовуються при стилізації сторінок і додаванні якихось декоративних елементів. Комбінації всіх цих варіантів допомагають створювати незвичайні ефекти на сторінці і дуже допомагають роботі верстальника.