Специальные селекторы
Специальный селектор – это селектор, неявно привязывающий стиль к элементу Web‑страницы согласно более сложному, чем имя тега, критерию. Таким критерием может быть, например, порядковый номер элемента в родительском элементе, указание на определенную часть содержимого абзаца (первую строку или первую букву), состояние гиперссылки (посещена она или нет) и пр. Обычно специальные селекторы используют в комбинированных стилях, чтобы сделать их более конкретными.
Комбинаторы
Комбинаторы – разновидность специальных селекторов, привязывающая стиль к элементу Web‑страницы на основании его местоположения относительно других элементов.
Комбинатор + (плюс) позволяет привязать стиль к элементу Web‑страницы, непосредственно следующему за другим элементом. При этом оба дочерних элемента должны быть вложенными в один и тот же родительский:
<элемент 1> + <элемент 2> { <стиль> }
Стиль будет привязан к элементу 2, который должен непосредственно следовать за элементом 1.
Комбинатор ~ (тильда) позволяет привязать стиль к элементу Web‑страницы, следующему за другим элементом и, возможно, отделенному от него другими элементами. При этом оба дочерних элемента должны быть вложенными в один и тот же родительский:
<элемент 1> ~ <элемент 2> { <стиль> }
Стиль будет привязан к элементу 2, который должен следовать за элементом 1. При этом элемент 2 может быть отделен от элемента 1 другими элементами.
Комбинатор > позволяет привязать стиль к элементу Web‑страницы, непосредственно вложенному в другой элемент:
<элемент 1> > <элемент 2> { <стиль> }
Стиль будет привязан к элементу 2, который непосредственно вложен в элемент 1.
|
|
Комбинатор <пробел> позволяет привязать стиль к элементу Web‑страницы, вложенному в другой элемент, причем не обязательно непосредственно:
<элемент 1> <элемент 2> { <стиль> }
Стиль будет привязан к элементу 2, который так или иначе вложен в элемент 1. При этом элемент 2 может быть вложен в другой элемент, вложенный в элемент 1, или даже в несколько таких элементов последовательно.
Селекторы по атрибутам тега
Селекторы по атрибутам тега – это специальные селекторы, привязывающие стиль к тегу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение.
Селекторы по атрибутам тега используются не сами по себе, а только в совокупности со стилями переопределения тега или комбинированными стилями. Их записывают сразу после основного селектора без всяких пробелов и берут в квадратные скобки.
Селектор вида
<основной селектор> [ <имя атрибута тега> ] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем.
Пример:
TD[ROWSPAN] { background-color: grey }
Этот стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN, т. е. к ячейкам, объединенным по горизонтали.
Селектор вида
<основной селектор> [ <имя атрибута тега> = <значение> ] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанными именем и значением.
Пример:
TD[ROWSPAN=2] { background-color: grey }
Селекторы вида
<основной селектор> [ <имя атрибута тега> ~= <список значений, разделенных пробелами> ] { <стиль> }
|
|
и
<основной селектор> [ <имя атрибута тега> | = <список значений, разделенных запятыми> ] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, совпадающим с одним из указанных в списке.
Селектор вида
<основной селектор> [ <имя атрибута тега> ^= <подстрока> ] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, начинающимся с указанной подстроки.
Селектор вида
<основной селектор> [ <имя атрибута тега> $= <подстрока> ] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, заканчивающимся указанной подстрокой.
Селектор вида
<основной селектор> [ <имя атрибута тега> *= <подстрока> ] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, включающим указанную подстроку.
Псевдоэлементы
Псевдоэлементы – разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.
Псевдоэлементы используются не сами по себе, а только в совокупности с другими стилями. Их записывают сразу после основного селектора без всяких пробелов:
<основной селектор><псевдоэлемент> { <стиль> }
Псевдоэлемент :first-letter привязывает стиль к первой букве текста в элементе Web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение.
Пример:
P:first-letter { font‑size: larger }
|
|
Этот стиль будет привязан к первой букве абзаца.
Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе Web-страницы:
Пример:
P:first-line { text-transform: uppercase }
Данный стиль будет привязан к первой строке абзаца.
Псевдоклассы
Псевдоклассы – самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.
Псевдоклассы также используются не сами по себе, а только в совокупности с другими стилями. Их записывают сразу после основного селектора без всяких пробелов:
<основной селектор><псевдокласс> { <стиль> }
Псевдоклассы, в свою очередь, сами делятся на группы.
Псевдоклассы гиперссылок
Псевдоклассы гиперссылок служат для привязки стилей к гиперссылкам на основе их состояния: является гиперссылка посещенной или непосещенной, щелкает на ней посетитель мышью или только навел на нее курсор мыши и др.
Все псевдоклассы гиперссылок, доступные в стандарте CSS 3:
‑ :link – непосещенная гиперссылка;
‑ :visited – посещенная гиперссылка;
‑ :active – гиперссылка, на которой посетитель в данный момент щелкает мышью;
‑ :focus – гиперссылка, имеющая фокус ввода;
‑ :hover – гиперссылка, на которую наведен курсор мыши.
Псевдоклассы гиперссылок применяются совместно со стилями, задающими параметры для гиперссылок. Это могут быть стили переопределения тега <A> или комбинированные стили, созданные на основе стиля переопределения тега <A>.
Псевдоклассы гиперссылок можно комбинировать, записывая их друг за другом:
A: visited: hover { text‑decoration: underline }
Этот стиль будет применен к посещенной гиперссылке, над которой находится курсор мыши.