Селектори атрибуту

Як ви знаєте з курсу HTML, елементи можуть мати атрибути, які дають додаткову інформацію про елемент, що розмічується. У CSS можна використовувати селектори атрибута для стилізації елементів з певними атрибутами. Цей урок покаже вам, як використовувати ці дуже корисні селектори.

Селектори наявності та значення

Ці селектори уможливлюють вибір елемента, заснований тільки на наявності атрибута (наприклад, href ) або на всіляких поєднаннях зі значенням атрибута.

У наведеному нижче прикладі ви можете побачити використання цих селекторів.

• Використовуючи li[class], ми можемо вибрати кожен селектор із атрибутом класу. Це відповідає всім пунктам списку, крім першого.
• li[class="a"] вибирає селектор з класом a, але не селектор з класом a у поєднанні з іншим, відокремленим комою, класом як частиною значення. Він обирає другий пункт списку.
• li[class~="a"] вибере клас a , а також значення, яке містить клас a як частину розділеного пропуском списку. Він вибере другий та третій пункти списку.

Селектори входження підрядки

Ці селектори надають ширші можливості виявлення входження підрядки значення атрибута. Наприклад, якщо у вас є класи box-warning і box-error і ви хочете вибрати все, що починається з рядка "box-", ви можете використовувати [class^="box-"] , щоб вибрати обидва класи (або [class |="box"] як описано у попередньому розділі).

(Відступ: можливо, буде корисним помітити, що ^ і $ давно використовуються як якоря у так званих регулярних виразах і позначають починається з і закінчується на.)

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

• li[class^="a"] вибирає всі значення атрибуту, які починаються з a, що відповідає першим двом елементам списку.
• li[class$="a"] вибирає всі значення атрибута, які закінчуються на a , що відповідає першому та третьому елементу списку.
• li[class*="a"] вибирає всі значення атрибута, де з'являється a незалежно від положення в рядку, що відповідає всім елементам нашого списку.

Чутливість до регістру

Якщо ви хочете вибрати значення атрибута без урахування регістру, ви можете використовувати значення i перед закриванням дужкою. Ця ознака свідчить браузеру, що символи ASCII мають зіставлятися без урахування регістру. Без цієї ознаки значення будуть зіставлені відповідно до чутливості до регістру мови документа – у разі HTML така чутливість є.

У прикладі нижче перший селектор вибере значення, що починається з a — це відповідає лише першому елементу списку, тому що два інших елементи списку починаються з великої літери A. Другий селектор використовує ознаку нечутливості до регістру і тому вибере всі елементи списку.

Примітка: Існує також більш нове значення s, яке викликає зіставлення з урахуванням регістру в контекстах, де зіставлення зазвичай не враховує регістр, проте це не так добре підтримується в браузерах і не дуже корисно в контексті HTML.

Наступні кроки

Отже, ми розглянули селектори атрибуту, і ви можете перейти до наступної статті, в якій розповідається про псевдокласи та псевдоелементи.

Селектори CSS

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

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

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

Раніше ви зустрічали кілька різних селекторів і дізналися, що існують селектори, які по-різному ставляться до документа, наприклад, використовуючи елемент h1 або клас .special.

У CSS селектори визначаються специфікації CSS-селекторів; як і інші частини CSS, потрібно підтримувати їхню роботу в браузерах. Більшість селекторів, які ви зустрінете, визначено у Специфікації селекторів 3 рівня, де ви зможете знайти всю інформацію про підтримку селекторів у браузерах.

Декілька селекторів

Декілька селекторів, що використовують одні й ті самі таблиці стилів, можна об'єднати в лист селекторів: правило буде додано до кожного селектора. Наприклад, я маю однакові правила для заголовка h1 і класу .special ; я можу написати їх так:

А можу написати коротше — просто відокремивши селектори комами:

Пробіл можна вставляти до або після коми. Ще зручніше писати кожен селектор з нового рядка:

У вправі нижче об'єднайте два селектори в одному правилі. Результат повинен залишитися таким самим.

При об'єднанні селекторів таким чином, якщо хоч один селектор буде недійсним, все правило буде пропущено.

У прикладі нижче правило для селектора класу не працюватиме, тоді як h1 буде стилізовано.

Але якщо ми поєднаємо селектори, правило не застосовується ні до h1, ні до класу: воно вважається недійсним.

Типи селекторів

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

Селектори тегів, класів та ідентифікаторів

До цієї групи належать селектори HTML-елементів, таких як .

До групи належать і селектори класів:

або селектори ідентифікаторів (ID):

Селектори атрибутів

Ця група селекторів дозволяє вибирати селектори, ґрунтуючись на наявності вони мають конкретного атрибута елемента:

або ґрунтуючись на значенні атрибуту:

a[href="https://example.com"]

Псевдокласи, псевдоелементи

До цієї групи належать псевдокласи, що стилізують певний стан елемента. Псевдоклас :hover , наприклад, застосовує правило, тільки якщо на елемент наведено курсор миші

До групи ще належать псевдоелементи, які обирають певну частину елемента (замість цілого елемента). Наприклад, ::first-line завжди вибирає перший рядок усередині елемента (абзацу

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

Комбінатори

І остання група селекторів: вона дозволяє об'єднувати селектори, щоб було легко знаходити конкретні елементи всередині документа. У наступному прикладі ми знайшли дочірній елемент за допомогою комбінатора дочірніх елементів ( > ):

Продовження

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

Довідка про селектори

У таблиці нижче доступні зараз селектори, а також посилання до сторінок, де розповідається, як використовувати кожен з них.Я також додав посилання на сторінки MDN для кожного селектора, щоб ви могли перевірити, чи вони підтримуються браузерами.