Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як задати стилі за атрибутами?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Атрибутні селектори** (`[attr]`, `[attr="val"]`, `[attr^="val"]`, `[attr$="val"]`, `[attr*="val"]`) дозволяють вибирати елементи за наявністю атрибута або за початком, кінцем чи підрядком його значення. **Ключове:** вони зручні для стилізації форм, посилань за типом і елементів з кастомними `data-*`-атрибутами без зайвих класів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняСтилі за атрибутами задаються за допомогою **атрибутних селекторів**, вони дозволяють вибирати елементи на основі наявності атрибута чи його значення. Синтаксис полягає у використанні квадратних дужок `[]`. --- ### **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 точнішим і гнучкішим в управлінні стилями.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.