Селекторы атрибутов CSS

Применяются для выбора элементов на основании их атрибутов, а так же значений этих атрибутов.

Для выбора элемента по его атрибуту, независимо от значения этого атрибута используется следующая конструкция: [атрибут]. Например, нам понадобилось отметить красной рамкой изображения у которых задан атрибут alt. Делаем так:

img[alt] {border:1px solid red;}

Можно выбрать только те теги, атрибуты которых имеют определенное значение. Нужно, например, ко всем тегам с атрибутом type, значение которого text, применить правило — размер текста 16px. Делается следующим образом:

[type=»text»] {font-size:16px;}
Если нужно выбрать элементы, атрибут class которых содержит слово img, то используется такой код:


[class~=»img»] {margin:5px;}
Если нужно выбрать атрибут, значение которого начинается с какого-либо текста:


[href^=»http://»] {color:#009};
Если нужно выбрать атрибут, значение которого заканчивается на какой-либо текст:


[href$=».com»] {font-size:10px;}
Если нужно выбрать атрибут, значение которого содержит какой-либо текст:

[title*=»man»] {background-color:#0cc;}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *