Селекторы в CSS

Наверное, каждый разработчик сталкивался со стандартными селекторами HTML элементов. В css мы активно используем селектор по классу или по id.

CSS является довольно мощным инструментом и не ограничивается лишь данными селекторами. Рассмотрим сначала самые простые, известные всем, селекторы.

Простые селекторы

  1. Поиск по типу


    Это самый простой вид, который обращается к самому тегу. В данном примере мы указываем, что все параграфы и элементы span будут иметь размер шрифта 12px, если это не переопределено более весомым правилом.
  2.  Универсальный селектор — *


    В данном случае мы обращаемся ко всем элементам, находящимся внутри тегов p, независимо от уровня вложенности.
  3. Селектор класса — .class


    В данном случае мы обращаемся ко всем элементам p, имеющим класс title. В примере ниже окрашен будет только первый параграф:
  4.  Селектор идентификатора —#id

    Здесь все по аналогии с классами, но только идет обращение к id элемента.

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

В данном разделе находятся более сложные селекторы, которые, вероятно, не каждый использует при верстке.

  1. Element[attribute] — соответствует всем элементам Element, имеющим атрибут atribute.


    Данное правило сделает текст жирным в ссылках, имеющих атрибут rel. Правило будет применено к первым двум ссылкам, представленных в HTML коде:

  2. Element[attribute=value] — как и прошлый пример, выделяет все элементы, имеющий атрибут attribute, равный value.

    В примере выше данное правило выделит только первую ссылку.
  3. Element[attribute~=part] — соответствует элементам Element, которые содержат значение part в атрибуте attribute. В данном случае использована тильда (~), которая указывает, что если в атрибуте указано несколько значений через запятую и одно из них будет part, то правило сработает.


    В данном примере правило сработает только на первую ссылку
  4. Element[attribute^=part] — соответствует элементам Element, имеющим атрибут attribute, начинающийся со строки part:

    Данное правило сработает только на вторую ссылку из примера выше. Первая ссылка не подходит под данное правило, т.к. значение атрибута «help» находится не вначале строки.
  5. Element[attribute$=part]  — аналогично предыдущему правилу, только в данном случае значение атрибута ищется в конце строки.

    Данное правило сработает на две первые ссылки из примера выше.
  6. Element[attribute*=part]  — соответствует всем элементам Element, в значении атрибута которого содержится part.

    Единственное отличие от правила 3 — подстрока help являться частью другого слова.

    В данном примере правило применится к первым двум ссылкам. Правило 3 здесь сработало бы только для первой ссылки.
  7. Element[attribute|=part] — данное правило очень похоже на 4. Единственное отличие, что значение атрибута должно не только находиться вначале строки, но и быть отделенным от остальных знаком «-«. Наверное, единственное правило, которое имеет сомнительное применение.


    В данном случае правило сработает только для второй ссылки.

    Множественные селекторы

    Селекторы атрибутов можно комбинировать



    В данном случае правило сработает для двух ссылок.