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

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

От автора: селекторы – это сердце CSS. Без селекторов изменять CSS-свойства можно лишь через атрибут style на элементе через инлайновые стили, что неудобно. Именно поэтому мы используем селекторы. Изначально в CSS можно было искать элементы по типу, классу и id. Это требовало добавлять атрибуты классов и id в разметку, чтобы потом можно было различить элементы одного типа в стилях. В CSS2.1 появились псевдоэлементы, псевдоклассы и комбинаторы. В CSS3 нам предоставлен широкий набор селекторов, с помощью которых мы можем ссылаться на почти любой элемент на странице.

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

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

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

Комбинаторы родительских элементов (E F)

Этот тип селекторов вы должны знать. Комбинатор родительских элементов ищет все элементы 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 кроме первого в заданном контейнере.

Родственный селектор (E ~ F)

Этот селектор слегка посложнее. Родственный селектор находит все элементы F, у которых общий родитель с E, и которые идут после E в разметке. Запись h1 ~ h2 найдет все h2 после h1, у которых общий прямой родитель с 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 ~ h2, то второй заголовок попадет в выборку. Точно так же h2 ~ p выберет только последний параграф, так как перед первым параграфом идет h2, и у h2 с h1 общий родитель.

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

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

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

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

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

По мере добавления стилей на сайт в следующих главах вы увидите много таких селекторов.

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

В CSS2 появилось несколько селекторов атрибутов. С их помощью можно искать элементы по их атрибутам. В CSS3 появились дополнительные селекторы атрибутов, с помощью которых можно искать элементы по шаблону. В CSS Selectors Level 4 их станет еще больше: E[attr]

Найдет любой элемент E с атрибутом attr, вне зависимости от значения атрибута. Мы использовали этот селектор в Главе 4 для стилизации обязательных полей. input:required работает только в последних версиях браузеров, а input[required] имеет тот же эффект и работает в IE7 и IE8: E[attr=val]

Находит любой элемент E с атрибутом attr и значением val. Селектор не новый, но с его помощью удобно находить поля формы по типам. Например, можно искать чекбоксы с помощью input[type=checkbox]: E[attr|=val]

Находит любой элемент E с атрибутом attr и значением val, или если значение атрибута начинается на val-. Этот селектор чаще всего используют для поиска атрибута lang. Например, p[lang|="en"] найдет все параграфы, в которых задан английский язык, будь то <p lang=»en-uk»> или <p lang=»en-us»>: E[attr~=val]

Находит любой элемент E с атрибутом attr, в значении которого есть целое слово val, отделенное пробелами. Например, .info[title~=more] найдет все элементы с классом info, в которых есть атрибут title со словом more. Например, если значение атрибута title будет равно «Click here for more information»: E[attr^=val]

Находит все элементы E, значение атрибута attr в которых начинается на val. Другими словами, val является началом значения атрибута: E[attr$=val]

Находит все элементы E, значение атрибута attr в которых заканчивается на val. Другими словами, val является концом значения атрибута: E[attr*=val]

Находит все элементы E, в которых в атрибуте attr встречается значение val. Этот селектор похож на E[attr~=val], только здесь val может быть частью слова. Возьмем предыдущий пример, .fakelink[title*=info] {} найдет все элементы с классом fakelink, у которых в атрибуте title есть строка info, например, «Click here for more information».

В селекторах атрибутов значение val будет регистрозависимым для регистрозависимых значений в HTML. Например, input[class^="btn"] регистрозависимо, так как классы регистрозависимы, а input[type="checkbox"] не зависит от регистра, так как значение атрибута type не зависит от регистра в HTML.

Если в значении используются буквы и цифры, кавычки ставить не обязательно. Есть пара исключений. Пустые строки, строки, начинающиеся на числа, двойное тире и т.д. обязательно брать в кавычки. Так как здесь есть исключения, лучше всего взять за привычку всегда ставить кавычки даже там, где они не нужны.

В CSS Selectors Level 4 можно будет отключать чувствительность к регистру с помощью символа i перед закрывающей скобкой, E[attr*=val i].

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практический курс по ReactJS для начинающих

Прямо сейчас получите курс по созданию игры на ReactJS

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree