[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-css-kakie-sushchestvuyut-selektory-atributov":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":18,"progress":19,"seo":20},1021,"kakie-sushchestvuyut-selektory-atributov",32,"osnovy-css","Основы CSS","🎨","Какие существуют селекторы атрибутов?","Селекторы атрибутов позволяют выбирать элементы на основании наличия HTML-атрибута или его значения.\n\n| Селектор | Описание | Пример |\n|----------|----------|--------|\n| `[attr]` | Элементы, имеющие атрибут `attr` | `[disabled]` |\n| `[attr=value]` | Значение атрибута точно равно `value` | `[type=\"text\"]` |\n| `[attr^=value]` | Значение начинается с `value` | `[href^=\"https\"]` |\n| `[attr$=value]` | Значение заканчивается на `value` | `[href$=\".pdf\"]` |\n| `[attr*=value]` | Значение содержит подстроку `value` | `[href*=\"youtube\"]` |\n| `[attr~=value]` | Значение содержит `value` как отдельное слово (через пробел) | `[class~=\"active\"]` |\n| `[attr\\|=value]` | Значение равно `value` или начинается с `value-` | `[lang\\|=\"en\"]` |\n\n### Пример использования\n\n```css\n\u002F* Все ссылки на PDF-файлы — с иконкой *\u002F\na[href$=\".pdf\"]::after {\n  content: \" (PDF)\";\n  color: red;\n}\n\n\u002F* Все внешние ссылки *\u002F\na[href^=\"http\"] {\n  color: green;\n}\n\n\u002F* Все обязательные поля формы *\u002F\ninput[required] {\n  border: 2px solid orange;\n}\n```\n\n> **На собеседовании:** достаточно помнить основные варианты: точное совпадение `=`, начало `^=`, конец `$=`, подстрока `*=`. Частая ошибка — путать `~=` (слово целиком) и `*=` (подстрока).","","junior",[15,16,17],"css","атрибуты","селекторы",[],null,{"title":21,"description":22,"ogTitle":23,"ogDescription":24,"keywords":25,"schemaAnswer":34,"featuredSnippetReady":35},"Селекторы атрибутов в CSS — Gymterview","Селекторы атрибутов CSS: [attr], [attr=value], [attr^=value], [attr$=value], [attr*=value], [attr~=value], [attr|=value]. Примеры использования.","Селекторы атрибутов CSS: полный список — Gymterview","Обзор всех селекторов атрибутов: точное совпадение, начало, конец, подстрока. Примеры использования.",[26,27,28,29,30,31,32,33],"селектор атрибутов CSS","[attr]","attr=value","attr^=","attr$=","attr*=","CSS attribute selector","собеседование","Селекторы атрибутов: [attr] — наличие атрибута, [attr=value] — точное совпадение, [attr^=value] — начинается с, [attr$=value] — заканчивается на, [attr*=value] — содержит подстроку, [attr~=value] — содержит как отдельное слово, [attr|=value] — равно или начинается с value-. Основные для запоминания: =, ^=, $=, *=.",true]