Селекторы по атрибутам тега

Селекторы по атрибутам тега — это специальные селекторы, привязывающие стиль к тегу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение.

Селекторы по атрибутам тега используются не сами по себе, а только в совокупности со стилями переопределения тега или комбинированными стилями. Их записывают сразу после основного селектора без всяких пробелов и берут в квадратные скобки.

Селектор вида

<основной селектор> [<имя атрибута тега> ] { <стиль> }

привязывает стиль к элементам, теги которых имеют атрибут с указанным именем .

Пример:

TD[ROWSPAN] { background-color: grey }

Этот стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN, т. е. к ячейкам, объединенным по горизонтали. Селектор вида

<основной селектор> [<имя атрибута тега> =<значение> ] { <стиль> }

привязывает стиль к элементам, теги которых имеют атрибут с указанными именем и значением .

Пример:

TD[ROWSPAN=2] { background-color: grey }

Данный стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значением 2, т. е. к двойным ячейкам, объединенным по горизонтали. Селекторы вида

<основной селектор> [<имя атрибута тега> ~=<список значений, разделенных пробелами> ] { <стиль> }

и

<основной селектор> [<имя атрибута тега>| =<список значений, разделенных запятыми> ] { <стиль> }

привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, совпадающим с одним из указанных в списке .

Пример:

TD[ROWSPAN~=2 3] { background-color: grey } TD[ROWSPAN|=2,3] { border: thin dotted black }

Эти стили будут привязаны к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значениями 2 и 3, т. е. к двойным и тройным ячейкам, объединенным по горизонтали.

Селектор вида

<основной селектор> [<имя атрибута тега> ^=<подстрока> ] { <стиль> }

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

Пример:

IMG[SRC^=http://www.pictures.ru] { margin: 5px }

Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, начинающимся с подстроки "http://www.pictures.ru", т. е. к изображениям, взятым с Web-сайта http://www.pictures.ru .

Селектор вида

<основной селектор> [<имя атрибута тега> $=<подстрока> ] { <стиль> }

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

Пример:

IMG[SRC$=gif] { margin: 10px }

Данный стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, заканчивающимся подстрокой "gif", т. е. к изображениям

формата GIF.

Селектор вида

<основной селектор> [<имя атрибута тега> *=<подстрока> ] { <стиль> }

привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, включающим указанную подстроку .

Пример:

IMG[SRC*=/picts/] { margin: 10px }

Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, включающим подстроку "/picts/", т. е. к изображениям, взятым из папки picts Web-сайта, откуда они загружены.