CSS селекторы: типы, атрибуты, классы и идентификаторы
Селекторы — это что-то типа ссылок или указателей на элементы HTML. Рассмотрим какие бывают селекторы и на что можно «указывать».
Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code.
Воспринимайте селекторы, как запросы в поисковой строке Google. Если запрос неверный, будет написано «к сожалению ничего не найдено». Так и ваши стили не применятся на ненайденные элементы.
Основные селекторы элементов
* { styles block }
Универсальный селектор (universal selector, wildcard)
Буквально обозначает «все». «Выделяет» или указывает на все элементы.
E { style block }
Селектор типов элементов (type selector)
«Выделяет» все элементы типа E в документе. Под E имеется ввиду название элемента, его тег.
E F { styles block }
Селектор потомков (descendant combinator)
«Выделяет» все элементы типа F, которые являются «потомками» всех элементов типа E.
E * F { styles block }
Селектор дальних потомков
«Выделяет» все элементы типа F, которые являются «потомками» всех элементов типа E и являются не «младше внуков».
E > F { styles block }
Селектор детей (child combinator)
«Выделяет» все элементы типа F, которые являются «детьми» всех элементов типа E, но не являются «внуками» и «старше».
E \+ F { styles block }
Селектор строго следующего по порядку сестринского элемента (adjacent sibling combinator)
«Выделяет» все элементы типа F, которые являются «сестринским» по отношению к элементу типа E и идут сразу после него.
E ~ F { styles block }
Селектор следующего сестринского элемента (general sibling combinator)
«Выделяет» все элементы типа F, которые являются «сестринским» по отношению к элементу типа E и идут после него.
Селекторы элементов по атрибутам
HTML атрибуты и их значения можно использовать в качестве селекторов. Рассмотрим некоторые подобные селекторы.
E[foo] { styles block }
По наличию атрибута
«Выделяет» все элементы типа E у которых присутствует атрибут foo. Например, можно «выделить» все цитаты (blockquote) у которых присутствует ссылка на источник (cite).
E[foo="bar"] { styles block }
По значению атрибута
«Выделяет» все элементы типа E у которых присутствует атрибут foo и его значение равняется bar.
E[foo~="bar, baz"] { styles block }
По нескольким значениям атрибута
Работает схожим образом с предыдущим селектором, только можно указать несколько значений.
E[foo|="bar"] { styles block }
По началу значению атрибута после которого идёт дефис (минус)
Например, можно использовать для «выделения» элементов по языковому коду типа en-EN, ru-RU.
E[foo^=\"bar\"] { styles block }
По началу значения атрибута
Например, можно «выделить» все ссылки с защищённым протоколом (href^="https»).
E[foo$="bar"] { styles block }
По окончанию значения атрибута
Например, можно «выделить» все ссылки на файлы-картинки и указать в каком они формате (href$="jpg»).
E[foo*=\"bar\"] { styles block }
По наличию текста в значении атрибута
Например, можно «выделить» элемент-ссылку, которая указывает на определённый сайт.
Селекторы по классам элементов (class selectors)
Класс (математика) — термин, употребляемый в теории множеств для обозначения произвольных совокупностей множеств, обладающих каким-либо определенным свойством или признаком.
В CSS классы удобно использовать для применения к элементам одинаковых свойств. Например, «покрасить» все ссылки в красный цвет.
Следующий селектор выделит все элементы типа E с классом bar.
E.bar { styles block }Селекторы элементов по идентификатору (ID selectors)
Идентифика́тор, ID (англ. data name, identifier — опознаватель) — уникальный признак объекта, позволяющий отличать его от других объектов.
В веб-разработке используется для обращения к конкретным элементам. На элемент можно «повесить» функцию, какие-то свойства, а также получить возможность ссылаться на элемент в рамках текущей или другой страницы.
Следующее выражение выделит все элементы E с идентификатором bar.
E#bar { styles block }Мы рассмотрели основные селекторы CSS, которые указывают на элементы по их типу, наличию атрибута, классу и идентификатору.
В следующей части мы рассмотрим селекторы по псевдо-классу элемента и селекторы псевдо-элементов
