От автора: селекторы – это сердце 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 не будет вложен в другой элемент.
Разберем небольшой пример:
|
1 2 3 4 5 6 7 8 9 |
<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’ам, вложенным внутрь колонок, мы используем дочерний селектор:
|
1 2 3 4 |
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
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
