Часть 5. Селекторы атрибутов

С помощью CSS селекторов атрибутов (англ. attribute selectors) вы можете задавать стиль тем тегам, которые имеют указанные атрибуты. Пример: вы желаете присвоить определенный стиль всем фотографиям, которые имеют атрибут title, не затрагивая все остальные изображения. Делается это просто:

img[title] {
	width: auto;
	height: auto;
}

Как видим, атрибут title записан в квадратных скобках после названия img, затем идет блок объявлений. А что если вам понадобится создать стиль только для тех изображений с атрибутом title, которым присвоен определенный класс, скажем, .gallery? В таком случае это записывается так:

.gallery[title] {
	width: auto;
	height: auto;
}

Атрибуты со значениями

Можно делать выборку элементов, у которых имеется определенное значение атрибута. Пример: делаем рамку для изображений, у которых есть атрибут title со значением portrait:

img[title="portrait"] {
	border-style: solid;
}

Выборка по началу текста

Селекторы атрибутов также могут пригодиться при оформлении ссылок. Представьте, что вам нужно особым образом выделить все адреса URL с протоколом https://. Для этого достаточно описать, как выглядит начало адреса URL:

a[href^="https://"] {
	color: green;
}

Обратите внимание на символ ^, который в переводе на наш язык означает «начинается с». Используя его, вы можете придавать свой стиль различным ссылкам (и не только им). Например, чтобы изменить цвет всех ссылок, которые ведут на главную или другие страницы https://google.com, нужно записать:

a[href^="https://google.com"] {
	color: green;
}

Обратите внимание на то, что наш стиль будет применен строго к тем ссылкам, которые начинаются так https://google.com. Другие варианты написания ссылок, например, https://www.google.com или http://google.com, необходимо записывать отдельно. Пример:

a[href^="https://google.com"] {
	color: green;
}

a[href^="https://www.google.com"] {
	color: green;
}


/* Или более короткий способ: */

a[href^="https://google.com"], [href^="https://www.google.com"] {
	color: green;
}

Выборка по концу текста

А может быть вы желаете красиво оформить все ссылки на файлы с расширением .rar? Тогда вам понадобится описать, как выглядит окончание URL:

a[href$=".rar"] {
	color: #FFF;
	text-decoration: none;
	background-color: orange;
	padding: 5px 10px;
	cursor: pointer;
}

Не забудьте указать после названия атрибута символ $, который означает «заканчивается на».

Итоги

В следующей, последней подглаве вас ждет урок, где вы сможете закрепить полученные знания и потренироваться в работе с различными CSS-селекторами.