| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Специальные селекторы
|
|
Селекторы по атрибутам тега
Селекторы по атрибутам тега — это специальные селекторы, привязывающие стиль к тегу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение.Селекторы по атрибутам тега используются не сами по себе, а только в совокупности со стилями переопределения тега или комбинированными стилями. Их записывают сразу после основного селектора без всяких пробелов и берут в квадратные скобки.
Селектор вида
<основной селектор>[<имя атрибута тега>] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем.
Пример:
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-сайта, откуда они загружены.
Псевдоэлементы
Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.
Псевдоэлементы используются не сами по себе, а только в совокупности с другими стилями. Их записывают сразу после основного селектора без всяких пробелов:
<основной селектор><псевдоэлемент> { <стиль> }
Псевдоэлемент ::first-letter привязывает стиль к первой букве текста в элементе Web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение.Этот стиль будет привязан к первой букве абзаца.
Пример:
p::first-letter { font-size: larger }
Псевдоэлемент ::first-line привязывает стиль к первой строке текста в элементе Web-страницы:
p::first-line { text-transform: uppercase }
Данный стиль будет привязан к первой строке абзаца.
 
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
