Загрузка...

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

До сих пор вы находили элемент по имени тега, class, id и связям в дереве. Иногда сам HTML уже говорит правду: у этой ссылки есть target, это поле — type="email", адрес начинается с https. Селектор атрибута читает эту правду — без новой class на каждый случай.

Что такое селектор атрибута?

Селектор атрибута находит элементы с нужным HTML-атрибутом. Можно проверить только «наличие» или сверить значение точно / частично. Имя атрибута пишется в квадратных скобках: [attr].

Пять повседневных шаблонов

Ими закрывается почти вся обычная работа с атрибутами.

📊 Операторы селектора атрибута

Шаблон Простой смысл Пример
[attr] Этот атрибут есть (любое значение) a[target]
[attr="value"] Значение ровно такое input[type="email"]
[attr^="value"] Значение начинается с этого текста a[href^="https"]
[attr$="value"] Значение заканчивается этим текстом a[href$=".pdf"]
[attr*="value"] Этот текст где-то внутри значения a[href*="docs"]

Только наличие — [attr]

Когда в скобках одно имя, это значит: «пусть будет этот атрибут.» Какое у него значение — неважно.

Наличие — ссылки, открывающие новую вкладку

css
CSS Code 
a[target] {
font-weight: 600;
}

Когда это полезно?

Необязательные флаги в HTML: ссылка с target или элемент с data-state — даже если значение ещё не фильтруете.

Точное значение — [attr="value"]

Знак = говорит: значение должно совпасть буква в букву. Обычно берите значение в кавычки — так яснее и безопаснее.

Точное значение — поле email

css
CSS Code 
input[type="email"] {
border: 1px solid #0f766e;
}

Делать class или взять type?

Если в HTML уже есть type="email", пишите это в селекторе. Новая class (например .email-field) нужна, когда тот же вид нужен и на чём-то без этого атрибута.

Начало значения — ^=

^= значит: значение атрибута начинается с этого текста. Очень удобно для безопасных адресов или общего префикса.

Начинается с — ссылки https

css
CSS Code 
a[href^="https"] {
color: #0f766e;
}

Конец значения — $=

$= значит: значение заканчивается этим текстом. Отлично для расширения файла в href или src.

Заканчивается на — ссылка PDF

css
CSS Code 
a[href$=".pdf"] {
font-style: italic;
}

Где-то в значении — *=

*= говорит: этот текст появляется в любом месте значения. Мощно, но быстро становится слишком широким. Если знаете начало или конец, обычно чище ^= или $=.

Содержит — путь docs в адресе

css
CSS Code 
a[href*="docs"] {
text-decoration: underline;
}

Хорошие привычки

  • Пишите значение в селекторе в кавычках: type="email"
  • Если страница загружена, добавьте имя тега: input[type="search"] читается яснее, чем голое [type="search"]
  • Пишите орфографию и регистр как в HTML
  • Не меняйте каждую class на атрибут; идите к атрибуту, когда разметка уже несёт этот факт

Попробуйте сами

  1. Три ссылки: одна https://…, одна кончается на .pdf, одна с docs в пути; плюс <input type="email"> и <input type="text">.
  2. Поставьте a[href^="https"] { color: #0f766e; } — цвет меняет только безопасная ссылка.
  3. a[href$=".pdf"] { font-style: italic; } — ссылка PDF становится курсивом.
  4. input[type="email"] { border-color: #0f766e; } — рамку получает только поле email.
  5. По желанию: посмотрите a[href*="docs"]; может захватить больше ссылок, чем строгий префикс/суффикс.

Частые ошибки

  • [type=email] без кавычек, когда кавычки яснее и безопаснее
  • *= вместо ^= — «содержит» берёт и середину, лишние ссылки подсвечиваются
  • Для обычного вида [class] вместо .name
  • Забыть, что = хочет всё значение — type="text" не то же, что type="textbox"
  • Путать имена атрибутов — hreflang это не href

Кратко

  • Селектор атрибута работает через [ ] с HTML-атрибутами
  • Только имя = наличие; = = точное значение
  • ^= начало, $= конец, *= где угодно в значении
  • Берите самый узкий оператор, который ещё выражает ваш замысел
  • При необходимости прикрепите к селектору и имя тега
  • Тренируйтесь на реальных href и type, затем обновите страницу

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок