Верстка сайтов. Селекторы HTML атрибутов в CSS

Тематическая группа (веб-дизайн): https://vk.com/zametkipohtml
Официальный паблик в ВК: https://vk.com/zametkinapolyah
Рубрика по теме в блоге: http://zametkinapolyah.ru/verstka-sajtov
Не забудь подписаться и нажать палец вверх: https://www.youtube.com/user/zametkin…

Помощь проекту:
WMR: R288272666982
WMZ: Z293550531456
Яндекс.Деньги: 410011531129223

CSS довольно гибкое средство и наличие CSS селекторов атрибутов тому подтверждение: мы можем отбирать HTML элементы с веб-страницы по наличию у них тех или иных HTML атрибутов и их значений.
a[href=”http://site.com”]
img

Первый селектор выберет все ссылки, у которых есть атрибут href со значением http://site.com. Второй селектор позволяет отобрать все атрибуты img, для которых задан атрибут title. Обратите внимание: CSS селекторы атрибутов состоят из двух частей: первая часть – имя элемента (можно указать класс или идентификатор) и далее в квадратных скобках указывается атрибут. CSS селекторы атрибутов позволяют не только отбирать элементы по их точным значениям, но и говорить браузеру, о том, с какой последовательности значение начинается, а какой последовательностью оно заканчивается, а между заданными последовательностями могут располагаться любые символы.
a[href^=”http://”]
В данном случае ^= говорит браузеру о том, что значение атрибута href элемента a должно начинаться с последовательности http://, а дальше могут следовать любые символы.
a[href$=”.png”]
В данном примере мы говорим браузеру: выбери все элементы a у которых значение href заканчивается последовательностью символов .png, об этом говорит конструкция $=.
a[href*=”document”]
Данный селектор позволит отобрать все элементы a с веб-страницы, у которых есть атрибут href, в котором встречается последовательность символов document.