Исправляем проблему с CSS selector a

Быстрый ответ

Если атрибутивный селектор a[href] в CSS работает непредсказуемо, убедитесь, что совпадение селектора точно соответствует значению атрибута href в вашем HTML-элементе ссылки.

a[href="exact-url"] { /* Воображайте, что ваш CSS – это волшебный посох волшебника */ }

Поиск по части значения расширяет возможности: ^= (начинается с), $= (заканчивается на) и *= (содержит):

a[href^="https://"] { /* HTTPS означает безопасность, не так ли? */ }
a[href$=".pdf"] { /* Потому что серый цвет – это слишком пресно для PDF */ }
a[href*="site.com"] { /* Если бы мой начальник об этом знал... */ }

Только убедитесь, что какое-нибудь другое более уникальное правило не превзошло по влиянию ваше в CSS.

Стилизация ссылок на PDF-файлы

Для выделения ссылок, ведущих к PDF-файлам, идеально подходит селектор $= для поиска URL, которые заканчиваются на .pdf:

a[href$='.pdf'] { 
    background-color: red; /* PDF-документы достойны особого внимания: фон красный как Марс! */
}

Работа с query-строками и якорями

Есть ли query-строки или якоря в URL? Воспользуйтесь следующими селекторами:

/* Отыскивает каждый href, где '.pdf' расположено перед '?' */
a[href*='.pdf?'] { /* стили */ }

/* Выбирает каждый href, где '.pdf' расположено перед '#' */
a[href*='.pdf#'] { /* стили */ }

Они могут объединиться в суперкоманду для более детальной стилизации:

a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] { 
    /* Они объединяются, чтобы раскрыть все секреты PDF-ссылок */ 
}

Подробнее об этом расскажет наш спикер на видео

Внимание к синтаксису

Будьте внимательны к глюкам CSS-синтаксиса: одна неправильно поставленная кавычка или скобка может полностью ослабить ваш селектор.

Проверьте всё дважды. Убедитесь, что ссылка соответствует тегу <a> с атрибутом href, который указывает на PDF.

Визуализация

Ваш селектор CSS — это Ной, а атрибут href — это Ковчег:

Ной (Селектор): a[href="https://example.com"]
Ковчег (Элемент): <a href="https://example.com">Ссылка</a>

🔑✅ Ной нашёл Ковчег, морской шторм выстоян!

Ной (Селектор): a[href="http://example.com"]
Ковчег (Элемент): <a href="https://example.com">Ссылка</a>

🔑❌ Ной не нашёл Ковчег, все надежды утонули!

Урок усвоен: Ною (атрибуту href) требуется идеальный Ковчег (точно указанный в селекторе).

Использование других атрибутов

Вы можете внести изысканность в дизайн, комбинируя href с другими атрибутами:

/* Приглашает на бал все 'скачиваемые' ссылки (*.pdf) */
a[href$=".pdf"][data-downloadable="yes"] { /* стили */ }

Правильная иерархия

Иногда проблема прячется не в атрибутивном селекторе, а в другом правиле, настаивающем на своём превосходстве:

#content a[href$=".pdf"] { /* Этот мускулистый селектор омрачает ваше представление! */ }

Эксперименты на JSFiddle

Попробуйте разные вариации ссылок на JSFiddle и узнайте, как ваши селекторы ведут себя на практике. Для отслеживания работы селекторов атрибутов PDF, посетите: Пример на JSFiddle.

Полезные материалы

1. Атрибутные селекторы – CSS: Каскадные таблицы стилей | MDN
2. Тонкости CSS атрибутных селекторов | CSS-Tricks
3. Укрощение продвинутых CSS селекторов — Smashing Magazine
4. CSS атрибутный селектор
5. Попробуйте CSS селектор
6. Сервис проверки разметки W3C
7. Can I use... Таблицы поддержки для HTML5, CSS3 и др