Контекстный селектор состоит из нескольких простых селекторов, которые разделены пробелами.

Вот возможный пример и причина применения.

При разработке страниц HTML часто приходится одни элементы вкладывать в другие, например, выделять слова тэгом < ЕМ> в каком-нибудь абзаце, задаваемом тэгом < р>. В этом случае говорят, что элемент р порождает элемент ЕМ и является его предком, а сам элемент ЕМ является потомком элемента р.

Некоторые свойства предка наследуются потомком, например, цвет

шрифта (свойство color). Чтобы вложенные элементы отображались со своими значениями свойств, можно определить для них правила форматирования, как показано ниже:

 

p {color: blue}

em (color: yellow}

 

Однако это приведет к тому, что все выделяемые в документе элементы будут отображаться шрифтом желтого цвета. А если необходимо, чтобы выделяемые только в абзаце элементы отображались желтым цветом, а в других частях документа каким-то другим цветом? Здесь помогут контекстные селекторы.

Поставленную задачу решит следующее правило:

 

p em {color: yellow)

 

Интерпретатор браузера находит элементы ЕМ, которые порождены (включены в блок) тегом < р>, и применяет к ним указанное правило форматирования.

 

Селекторы псевдоклассов

Для целей удобного форматирования в CSS вводится понятие псевдоклассов и псевдоэлементов. Фактически это условные структуры. Их нет в HTML странице.

Но их логическое наличие создает дополнительное удобство для форматирования.

 

Вот псевдоклассы ссылок (связей)

a: link { color: red } /* непосещенная связь */

a: visited { color: blue } /* посещенная связь */

a: active { color: green } /* активная связь */

a: hover { color: lime } /* связь, на которой расположен курсор мыши */

 

Любую ссылку в документе можно отнести к одному из перечисленных классов.

В приведенном примере задается отображение непосещенных связей красным цветом, посещенных — синим, активных — зеленым. Если курсор мыши будет расположен над связью, то ее цвет изменится на ярко-зеленый.

 

Так как указанные псевдоклассы применяются к единственному типу элементов А,

то при задании их в селекторе правил этот элемент можно опустить.

Следующие два правила будут эквивалентны:

 

A: link { color: red } /* непосещенная связь */

: link { color: red } /* непосещенная связь */

 

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

Простой выбор атрибутов

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

 

Например, чтобы выбрать все элементы h1, имеющие атрибут Tetatr с любым значением, и сделать их текст серебряным, укажем:

h1[Tetatr] {color: silver; }

 

 

В HTML-документах можно, например, выделить все изображения, имеющие атрибут alt, отметив таким образом изображения, оформленные правильно:

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

 

Аналогичным образом можно оформить только те теги < a>, в которых есть атрибут href. Это делается путем простого объединения селекторов атрибутов. Например, чтобы выделить полужирным шрифтом текст любой гиперссылки HTML, которая имеет и атрибут href, и атрибут title, можно написать:

a[href][title] {font-weight: bold; }

 

При этом полужирным шрифтом будет выделена первая ссылка следующей разметки, но не вторая или третья:

< a href=" http: //www.w3.org/" title=" W3C Home" > W3C< /a> < br />

< a href=" http: //www.webstandards.org" > Standards Info< /a> < br />

< a title=" Not a link" > dead.letter< /a>

 

Выбор на основании конкретного значения атрибута

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

Например, пусть мы хотим выделить полужирным шрифтом гиперссылку, указывающую на определенный документ веб-сервера. Это могло бы выглядеть примерно так:

a[href=" http: //www.css-discuss.org/about.html" ]

{font-weight: bold; }

 

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

 

Можно объединить несколько значений атрибутов, чтобы выбрать один документ.

Например, чтобы удвоить размер текста любой гиперссылки, у которой атрибут

href имеет значение http: //www.w3.org/ и

атрибут title имеет значение W3C Home,

напишите:

a[href=" http: //www.w3.org/" ][title=" W3C Home" ]

{font-size: 200%; }

 

 

Для указанной разметки только для первой ссылки будет выполнено увеличение размера текста.

< a href=" http: //www.w3.org/" title=" W3C Home" > W3C< /a> < br />

< a href=" http: //www.webstandards.org"

title=" Web Standards Organization" > Standards Info< /a> < br />

< a href=" http: //www.example.org/" title=" W3C Home" > dead.link< /a>

 

Результат вот какой будет

 

Замечание: селекторы идентификаторов и селекторы атрибутов, нацеленные на атрибут id, – это не совсем одно и то же. Иначе говоря, существует едва различимое, но важное отличие между h1#page_title и h1[id=" page-title" ].

Об этом мы будем говорить немного позже.

Выбор по частичному значению атрибута

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

 

Рассмотрим наш обычный пример текста:

< p class" urgent warning" >

⇐ Предыдущая1234

Поделиться: