Селекторы реляционных и атрибутов в CSS3

Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .

CSS3 селекторы

Селекторы — это сердце CSS. Без селекторов для целевых элементов на странице единственным способом изменить свойства CSS элемента будет использование атрибута style элемента и объявление встроенных стилей, что неудобно и не поддерживается. Поэтому мы используем селекторы. Первоначально CSS допускал сопоставление элементов по типу, классу и / или идентификатору. Это потребовало добавления атрибутов class и ID в нашу разметку для создания хуков и разграничения между элементами одного типа. CSS2.1 добавил псевдоэлементы, псевдоклассы и комбинаторы. С помощью CSS3 мы можем выбрать практически любой элемент на странице с широким диапазоном выбора.

В последующих описаниях мы будем включать селекторы, предоставленные нам в более ранних версиях CSS. Они включены потому, что, хотя мы можем использовать селекторы CSS3, селекторы, предшествующие CSS3, также являются частью спецификации CSS-селекторов уровня 3 и по-прежнему поддерживаются, так как CSS-селекторы уровня 3 расширяют их. Даже для тех селекторов, которые существуют уже довольно давно, стоит их здесь рассмотреть, поскольку в старой спецификации есть некоторые скрытые жемчужины, о которых мало кто знает. Обратите внимание, что все современные браузеры, включая IE9 и выше, поддерживают все селекторы CSS3.

Реляционные селекторы

Реляционные селекторы предназначаются для элементов на основе их отношения к другому элементу в разметке. Все они поддерживаются начиная с IE7 + и во всех других основных браузерах:

Десцендент комбинатор ( EF )

Вы обязательно должны быть знакомы с этим. Селектор потомков нацелен на любой элемент F который является потомком (дочерним, внучатым, правнуком и т. Д.) Элемента E Например, ol li предназначается для элементов li которые находятся внутри упорядоченных списков. Это будет включать элементы li в ul который вложен в ol , что может быть не тем, что вы хотите.

Детский комбинатор ( E > F )

Этот селектор соответствует любому элементу F который является прямым потомком элемента E любые последующие вложенные элементы будут игнорироваться.
Продолжая пример, ol > li будет только
целевые элементы li непосредственно внутри
ol , и будет опускать те, вложенные в
ul .

Смежный сублинг или соседний селектор ( E + F )

Это будет соответствовать любому элементу F который разделяет
тот же родитель, что и E , и приходит
сразу после E в разметке. Например, li + li будет нацеливаться на все элементы li кроме первого li в данном контейнере.

Общий сублинг или следующий родственный селектор ( E ~ F )

Это немного сложнее. Он будет соответствовать любому элементу F который имеет тот же родительский элемент, что и любой E и находится после него в разметке. Таким образом, h1 ~ h2 будет соответствовать любому h2 который следует за h1 , если они оба имеют одного и того же прямого родителя, то есть до тех пор, пока h2 не вложен ни в один другой элемент.

Давайте посмотрим на быстрый пример:

 <article> <header> <h1>Main title</h1> <h2>This subtitle is matched </h2> </header> <p> blah, blah, blah …</p> <h2>This is not matched by h1 ~ h2, but is by header ~ h2</h2> <p> blah, blah, blah …</p> </article> 

Строка селектора h1 ~ h2 будет соответствовать первому h2 , потому что h1 и h2 являются дочерними или прямыми потомками header . Следующий h2 вы увидите в фрагменте кода, не совпадает, поскольку его родитель — это article , а не header. Однако он будет соответствовать header ~ h2 . Аналогично, h2 ~ p только последнему абзацу, поскольку первый абзац предшествует h2 с которым он разделяет родительскую статью.

Примечание: почему нет «родительского» селектора?

Вы заметите, что до этого момента не было селектора «родителя» или «предка», а также селектора «предшествующего брата». Из-за производительности браузера, когда нужно было перемещаться назад по дереву DOM или переходить в наборы вложенных элементов, прежде чем принимать решение о том, применять стиль или нет, было невозможно использовать встроенные селекторы «вверх по дереву DOM».

jQuery включено :has() в качестве наследственного селектора. Этот селектор рассматривается для CSS селекторов уровня 4, но еще не реализован ни в одном браузере. Если и когда это будет реализовано, мы сможем использовать E:has(F) чтобы найти E , у которого F является потомком, E:has(> F) , чтобы найти E , у которого F является прямым потомком, E:has(+ F) , чтобы найти E который непосредственно предшествует F , и тому подобное.

Просматривая таблицу стилей для The HTML5 Herald , вы увидите несколько мест, где мы использовали эти селекторы. Например, при определении общего макета сайта мы хотим, чтобы разделенные на три столбца div делались влево. Чтобы этот стиль не применялся к любым другим div вложенным в них, мы используем дочерний селектор:

 main > div { float: left; overflow: hidden; } 

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