Selectors

Перейти к предыдущему разделу:
Cascading & inheritanceЭто пятый раздел руководства CSS для начинающих. В нем объясняется, как можно выборочно применять стили и каким образом различные типы селекторов имеют разные приоритеты.  

Некоторые атрибуты добавляются к тегам в шаблоне документа, и эти атрибуты используются в шаблоне таблицы стилей.

Информация: Селекторы

Ранее мы уже встречались с селекторами. Мы создали строку в файле стилей следующего вида:

strong {
  color: red;
}

В терминологии CSS эта строка полностью является правилом CSS. Это правило начинается со strong, что и называется селектором CSS. Селектор выбирает, к каким элементам DOM применяется правило.

На этой странице учебника объясняются дополнительные сведения о селекторах, которые можно использовать в правилах CSS.

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

Два атрибута имеют особый статус в CSS. Это class и id.

Селекторы классов

Используйте атрибут class в элементе, чтобы назначить элемент именованному классу. Выбор имени класса целиком за вами. Множество элементов в документе может иметь одно и то же значение класса.

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

Селекторы ID

Используйте атрибут id в элементе, чтобы назначить идентификатор элементу. Это зависит от вас, какое имя вы выберете для ID. Идентификационное имя должно быть уникальным в документе.

В таблице стилей введите знак решетки перед идентификатором, когда вы используете его в селекторе.

<p class="key" id="principal">

.key {
  color: green;
}

#principal {
  font-weight: bolder;
}

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

Вы не ограничены двумя специальными атрибутами, class и id. Вы можете определить другие атрибуты используя квадратные скобки. Внутри скобок вы задаёте имя атрибута, так же можно указать оператор соответствия и значение. Дополнительно, соответствие может быть установлено как чувствительное к регистру если дописать " i" после значения, но пока не все браузеры это поддерживают. Примеры:

[disabled]

Выбирает все элементы с атрибутом "disabled".

[type='button']

Выбирает элементы с типом "button".

[class~=key]

Выбирает элементы со значением класса(class) "key" (но не такие как например "keyed", "monkey", "buckeye"). По сути эквивалентно .key.

[lang|=es]

Выбирает элементы определённые как Spanish. Это включает "es" и "es-MX" но не включает "eu-ES" (что является языком Basque).

[title*="example" i]

Выбирает элементы в состав которых входит "example", игнорируя регистр. В браузерах, которые не поддерживают флаг "i", этот селектор возможно не найдет ни один элемент.

a[href^="https://"]

Выбирает все защищённые ссылки.

img[src$=".png"]

Косвенно выбирает изображения PNG; любые изображения которые являются изображениями PNG но, чей адрес URL не заканчивается на ".png" (такие как в строке запроса) не будут выбраны.

Селекторы псевдокласса

Псевдокласс класса CSS - это ключевое слово, добавленное в селектор, который задает особое состояние выбранного элемента. Например : hover применит стиль, когда пользователь наводит на элемент, указанный селектором.

Псевдо-классы вместе с псевдоэлементами позволяют применять стиль к элементу не только по отношению к содержанию дерева документов, но и по отношению к внешним факторам, таким как история навигатора (:visited, для примера), статус его содержимого (наподобии :checked на некоторых элементах формы) или положение мыши (наподобии :hover который позволяет узнать, находится ли мышь над элементом или нет). Чтобы просмотреть полный список селекторов, посетите CSS3 Спецификация работы селекторов.

selector:pseudo-class {
  property: value;
} 

Список псевдоклассов

• :link
• :visited
• :active
• :hover
• :focus
• :first-child
• :last-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :checked
• :enabled
• :disabled

Информация: Специфичность

Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу. Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе. Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS дает приоритет правилу, которое имеет более конкретный селектор. Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.

Если таблица стилей имеет противоречивые правила, и они одинаково специфичны, тогда CSS дает приоритет правилу, которое позже находится в таблице стилей.

Если у вас возникла проблема с конфликтующими правилами, попробуйте разрешить это, сделав одно из правил более конкретным, чтобы оно имело приоритет. Если вы не можете этого сделать, попробуйте переместить одно из правил ближе к концу таблицы стилей, чтобы оно имело приоритет.

Информация: Селекторы на основе отношений

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

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

Вы можете так же использовать символ * (звездочка), что подразумевает "любой элемент".

<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...

#data-table-1 td:first-child {text-decoration: underline;}
#data-table-1 td:first-child + td {text-decoration: line-through;}

Действие: Использование селекторов class и ID

1. Измените свой HTML-файл и продублируйте абзац, скопировав его и вставив в него.
2. Затем добавьте аттрибуты id и class  в первую копию, а аттрибут id во вторую копию, как показано ниже. Кроме того, скопируйте и вставьте весь файл снова:

   <!doctype html>
   <html>
     <head>
     <meta charset="UTF-8">
     <title>Sample document</title>
     <link rel="stylesheet" href="style1.css">
     </head>
     <body>
       <p id="first">
         <strong class="carrot">C</strong>ascading
         <strong class="spinach">S</strong>tyle
         <strong class="spinach">S</strong>heets
       </p>
       <p id="second">
         <strong>C</strong>ascading
         <strong>S</strong>tyle
         <strong>S</strong>heets
       </p>
     </body>
   </html>
   

3. Теперь отредактируйте свой файл CSS. Замените все содержимое на:

   strong { color: red; }
   .carrot { color: orange; }
   .spinach { color: green; }
   #first { font-style: italic; }
   

4. Сохраните файлы и обновите свой браузер, чтобы увидеть результат:

   Cascading Style Sheets

   Cascading Style Sheets

   Вы можете попробовать перестроить строки в вашем файле CSS, чтобы показать, что порядок не имеет никакого эффекта.

   Селекторы классов .carrot и .spinach имеют приоритет над селектором тега strong.

   Селектор ID #first имеет приоритет над селекторами класс и тег.

Действие: Использование селекторов псевдокласса

1. Создайте HTML-файл со следующим содержимым:

   <!doctype html>
   <html>
     <head>
     <meta charset="UTF-8">
     <title>Sample document</title>
     <link rel="stylesheet" href="style1.css">
     </head>
     <body>
       <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
     </body>
   </html>
   

2. Теперь отредактируйте свой файл CSS. Замените все содержимое на:

   a.homepage:link, a.homepage:visited {
     padding: 1px 10px 1px 10px;
     color: #fff;
     background: #555;
     border-radius: 3px;
     border: 1px outset rgba(50,50,50,.5);
     font-family: georgia, serif;
     font-size: 14px;
     font-style: italic;
     text-decoration: none;
   }
   
   a.homepage:hover, a.homepage:focus, a.homepage:active {
     background-color: #666;
   }
   

3. Сохраните файлы и обновите свой браузер, чтобы увидеть результат (наведите указатель мыши на следующую ссылку, чтобы увидеть эффект):

   Перейдите к нашей Домашняя страница

Действие: Использование селекторов на основе отношений и псевдоклассов

С помощью селекторов, основанных на связях и псевдоклассах, вы можете создавать сложные каскадные алгоритмы. Это обычная техника, используемая, например, для создания чисто-CSS выпадающее меню ( это только CSS, без использования JavaScript). Суть этого метода заключается в создании правила следующего вида:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

для применения к структуре HTML, наподобии следующей:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Смотрите наш полный Пример CSS-основанного выпадающего меню для возможной реплики.

Что дальше?

Ваша таблица стилей начинает выглядеть плотной и сложной. Следующая секция описывает пути CSS легкого чтения. Перейти к следующему разделу:
Readable CSS