Три селектора в CSS3 позволяют вам проверить значение указанного атрибута.
Они могут открыть огромные возможности, так что я думаю, что полезно знать их. Эти селекторы поддерживаются даже в IE7, так что они совершенно безопасны для использования во многих текущих проектах.
Вот краткое описание каждого из них, с некоторыми примерами.
Селектор атрибута: «Begins with»
Первый из трех селекторов позволит вам применить стиль к элементу, атрибут которого начинается с определенной строки. Например:
a[href^="http://"] { color: green; }
Символ ^ говорит браузеру: «Если ссылка имеет атрибут href и атрибут начинается с http://, тогда сделай ее зеленой». Этот простой пример показывает, как легко можно выбрать нужный элемент.
Но использовать этот селектор надо осторожно, так как этот селектор перекрасит все ссылки, которые начинаются с http://.
Можно расширить пример и сделать так:
a[href^="http://"] { color: green; } a[href^="http://www.domain.com"], a[href^="http://domain.com"] { color: blue; }
В данном случае перечисленные ссылки http://www.domain.com и http://domain.com будут синего цвета, а остальные зеленого.
Селектор атрибута: «Ends with»
Второй селектор является противоположностью первого. Вы можете стилизовать элемент, атрибут которого заканчивается на определенное значение. Например:
a[href$=".pdf"] { background: url(../images/pdf.png) no-repeat center right; padding-right: 20px; }
Этот селектор использует знак $. В данном случае, ко всем ссылкам, которые заканчиваются на .pdf, будет добавлена иконка и отступ.
Селектор атрибута: «Contains»
Последний селектор позволяет стилизовать элементы, атрибут которых содержит определенную подстроку. Например:
div[class*="post-"] p { color: green; }
Селектор использует символ *. В данном примере текст в параграфе будут зеленого цвета, если класс у div будет содержать строку post-.
Хотите что-то добавить?
Если вы уже использовали эти селекторы и у вас есть интересные примеры — пишите их, пожалуйста, в комментариях! Я был бы рад услышать любые практические варианты использования данных селекторов в проектах.
Спасибо за внимание!
Подписываемся на рассылку! 😉