Селекторы в CSS
Наверное, каждый разработчик сталкивался со стандартными селекторами HTML элементов. В css мы активно используем селектор по классу или по id.
CSS является довольно мощным инструментом и не ограничивается лишь данными селекторами. Рассмотрим сначала самые простые, известные всем, селекторы.
Простые селекторы
- Поиск по типу
Это самый простой вид, который обращается к самому тегу. В данном примере мы указываем, что все параграфы и элементы span будут иметь размер шрифта 12px, если это не переопределено более весомым правилом.
- Универсальный селектор — *
В данном случае мы обращаемся ко всем элементам, находящимся внутри тегов p, независимо от уровня вложенности. - Селектор класса — .class
В данном случае мы обращаемся ко всем элементам p, имеющим класс title. В примере ниже окрашен будет только первый параграф: - Селектор идентификатора —#id
Здесь все по аналогии с классами, но только идет обращение к id элемента.
Селекторы атрибутов
В данном разделе находятся более сложные селекторы, которые, вероятно, не каждый использует при верстке.
- Element[attribute] — соответствует всем элементам Element, имеющим атрибут atribute.
Данное правило сделает текст жирным в ссылках, имеющих атрибут rel. Правило будет применено к первым двум ссылкам, представленных в HTML коде:
- Element[attribute=value] — как и прошлый пример, выделяет все элементы, имеющий атрибут attribute, равный value.
В примере выше данное правило выделит только первую ссылку. - Element[attribute~=part] — соответствует элементам Element, которые содержат значение part в атрибуте attribute. В данном случае использована тильда (~), которая указывает, что если в атрибуте указано несколько значений через запятую и одно из них будет part, то правило сработает.
В данном примере правило сработает только на первую ссылку - Element[attribute^=part] — соответствует элементам Element, имеющим атрибут attribute, начинающийся со строки part:
Данное правило сработает только на вторую ссылку из примера выше. Первая ссылка не подходит под данное правило, т.к. значение атрибута «help» находится не вначале строки. - Element[attribute$=part] — аналогично предыдущему правилу, только в данном случае значение атрибута ищется в конце строки.
Данное правило сработает на две первые ссылки из примера выше. - Element[attribute*=part] — соответствует всем элементам Element, в значении атрибута которого содержится part.
Единственное отличие от правила 3 — подстрока help являться частью другого слова.
В данном примере правило применится к первым двум ссылкам. Правило 3 здесь сработало бы только для первой ссылки. - Element[attribute|=part] — данное правило очень похоже на 4. Единственное отличие, что значение атрибута должно не только находиться вначале строки, но и быть отделенным от остальных знаком «-«. Наверное, единственное правило, которое имеет сомнительное применение.
В данном случае правило сработает только для второй ссылки.Множественные селекторы
Селекторы атрибутов можно комбинировать
В данном случае правило сработает для двух ссылок.