Селекторы в CSS

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

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

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

1. Поиск по типу
   
   
   p, span { font-size: 12px; }

   1 2 3

   p, span { font-size: 12px; }

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

   1 2 3

   p * { color: red; }

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

   1 2 3

   p.title { color: red; }

   
   В данном случае мы обращаемся ко всем элементам p, имеющим класс title. В примере ниже окрашен будет только первый параграф:
   
   <p class="title">red</p> <p>not red</p>

   1 2	<p class="title">red</p> <p>not red</p>

4.  Селектор идентификатора —#id
   
   p#title { color: red; }

   1 2 3

   p#title { color: red; }

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

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

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

1. Element[attribute] — соответствует всем элементам Element, имеющим атрибут atribute.
   
   
   a[rel] { font-weight: bold; }

   1 2 3

   a[rel] { font-weight: bold; }

   
   Данное правило сделает текст жирным в ссылках, имеющих атрибут rel. Правило будет применено к первым двум ссылкам, представленных в HTML коде:
   
   
   <a href="" rel="help">bold</a> <a href="" rel="internal">bold</a> <a href="">not bold</a>

   1 2 3

   <a href="" rel="help">bold</a> <a href="" rel="internal">bold</a> <a href="">not bold</a>

2. Element[attribute=value] — как и прошлый пример, выделяет все элементы, имеющий атрибут attribute, равный value.
   
   a[rel=help] { font-weight: bold; }

   1 2 3

   a[rel=help] { font-weight: bold; }

   
   В примере выше данное правило выделит только первую ссылку.
3. Element[attribute~=part] — соответствует элементам Element, которые содержат значение part в атрибуте attribute. В данном случае использована тильда (~), которая указывает, что если в атрибуте указано несколько значений через запятую и одно из них будет part, то правило сработает.
   
   a[rel~=internal] { font-weight: bold; }

   1 2 3

   a[rel~=internal] { font-weight: bold; }

   
   
   <a href="" rel="internal help">bold</a> <a href="" rel="help">bold</a> <a href="" >not bold</a>

   1 2 3

   <a href="" rel="internal help">bold</a> <a href="" rel="help">bold</a> <a href="" >not bold</a>

   
   В данном примере правило сработает только на первую ссылку
4. Element[attribute^=part] — соответствует элементам Element, имеющим атрибут attribute, начинающийся со строки part:
   
   a[rel^=help] { font-weight: bold; }

   1 2 3

   a[rel^=help] { font-weight: bold; }

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

   1 2 3

   a[rel$=help] { font-weight: bold; }

   
   Данное правило сработает на две первые ссылки из примера выше.
6. Element[attribute*=part]  — соответствует всем элементам Element, в значении атрибута которого содержится part.
   
   a[rel*=help] { font-weight: bold; }

   1 2 3

   a[rel*=help] { font-weight: bold; }

   
   Единственное отличие от правила 3 — подстрока help являться частью другого слова.
   
   <a href="" rel="internal help">bold</a> <a href="" rel="helper">bold</a> <a href="" >not bold</a>

   1 2 3

   <a href="" rel="internal help">bold</a> <a href="" rel="helper">bold</a> <a href="" >not bold</a>

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

   1 2 3

   a[rel|=help] { font-weight: bold; }

   
   
   <a href="" rel="internal-help">bold</a> <a href="" rel="help-internal">bold</a> <a href="" rel="help internal" >not bold</a>

   1 2 3

   <a href="" rel="internal-help">bold</a> <a href="" rel="help-internal">bold</a> <a href="" rel="help internal" >not bold</a>

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

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

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

   a[rel*=page][rel~=help] font-weight: bold; }

   1 2 3

   a[rel*=page][rel~=help] font-weight: bold; }

   
   
   <a href="datapage.phpl" rel="help internal"> <a href="data.php" rel="internal help">

   1 2	<a href="datapage.phpl" rel="help internal"> <a href="data.php" rel="internal help">

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