Skip to main content

Як задати стилі за атрибутами?

CSSJunior~1 хв читання
Запропонувати правку

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

1. За наявністю атрибута

css
[input] { background: yellow; }

Селектор застосується до всіх елементів, у яких є атрибут input.

2. За точним збігом значення

css
input[type="text"] { border: 1px solid black; }

Селектор вибере <input type="text">.

3. За початком значення (^=)

css
a[href^="https"] { color: green; }

Вибере посилання, у яких href починається з https.

4. За кінцем значення ($=)

css
a[href$=".pdf"] { color: red; }

Вибере всі посилання, що ведуть на PDF.

5. За підрядком усередині значення (*=)

css
a[href*="google"] { color: blue; }

Вибере посилання, де в адресі є слово google.

Підсумок

Атрибутні селектори дають можливість вибирати елементи не за класом чи тегом, а за даними, які містяться в самих атрибутах. Це зручно для:

  • стилізації форм
  • стилізації посилань за типом
  • таргетингу елементів з кастомними атрибутами (data-*)
  • гнучкішого вибору DOM-вузлів без зайвих класів

Вони роблять CSS точнішим і гнучкішим в управлінні стилями.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку