CSS3: селекторы атрибутов

Три селектора в 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-.

 

Хотите что-то добавить?

Если вы уже использовали эти селекторы и у вас есть интересные примеры — пишите их, пожалуйста, в комментариях! Я был бы рад услышать любые практические варианты использования данных селекторов в проектах.

 

Спасибо за внимание!

Подписываемся на рассылку! 😉

 

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 22.06.2013