Selectors

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

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

CSS имеет собственную терминологию для описания языка CSS. Ранее в данном учебнике вы создали строку в файле стилей следующим образом:

strong {
  color: red;
}

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

Подробности

Часть внутри фигурных скобок называется объявлением.

Ключевое слово color - свойство, а red - значение.

Точка с запятой после пары "свойство-значение" отделяет её от других пар "свойство-значение" в том же объявлении.

Этот учебник ссылается на селектор типа strong как на селектор тега. Спецификация CSS ссылается на него как на селектор типа.

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

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

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

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

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

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

Селекторы ID

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

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

Пример
Этот HTML тэг имеет оба элемента, атрибут class и id: 
<p class="key" id="principal">

Значение идентификатора id, principal, должно быть уникально в документе, но разные тэги в документе, могут иметь одинаковое имя class со значением key.

Это правило делает все классы(class) со значениемkey зелёными. (Они даже не должны быть все элементами <p>.)

.key {
  color: green;
}

Это правило делает один элемент с идентификатором (id) и значением principal полужирным:

#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;
}

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

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

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

Подробнее

Вы также можете комбинировать селектор, создавая более конкретный селектор. Например, селектор .key выбирает все элементы, с ключом имени класса key. Селектор p.key отбирает только <p> элементы, которые имеют имя класса key.

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

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

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

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

Общие селекторы, основанные на отношениях
Селектор Выбрано
A E Любой E элемент, что является потомком одного из A элемента (то есть: дочерний, или один из дочернего, т.д.)
A > E Любой E элемент, что явлется  дочерним (т.е. прямой потомок)  A элемента.
E:first-child Любой E элемент, что является первым дочерним элементом родительского элемента.
B + E Любой E элемент, что является следующим "братом" B элемента (то есть: следующий ребенок того же родителя)

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

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

Пример

Таблица HTML имеет аттрибут id , но строки и ячейки не имеют отдельных идентификаторов:

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

Эти правила делают первую ячейку в каждой строке подчеркнутой, а "брат" первой ячейки каждой строки зачеркнутой (в примере 2-я ячейка) . Они влияют только на одну конкретную таблицу в документе::

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

Резульат  выглядит  наподобии:

Prefix 0001 default
Подробно

Обычным способом, если вы делаете селектор более конкретным, вы увеличиваете его приоритет.

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

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

Дополнительные примеры о таблицах, смотрите Tables на странице ссылок CSS.

Действие: Использование селекторов 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-файл, добавьте в свой CSS-файл одно правило, которое сохраняет все начальные буквы того же цвета, что и сейчас, но делает весь текст во втором абзаце синим:
    Cascading Style Sheets
    Cascading Style Sheets
  2. Теперь измените правило, которое вы только что добавили (не изменяя ничего другого), чтобы сделать первый абзац синим:
    Cascading Style Sheets
    Cascading Style Sheets
Possible solution
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: 
    #second { color: blue; }
    A more specific selector, p#second also works.
  2. Change the selector of the new rule to be a tag selector using p: 
    p { color: blue; }
Hide solution
See a solution for the challenge.

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

  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 легкого чтения.

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, SergeyNikolaev70, 1cprog, Tankerxyz, BigBond, mztrp, tnt4brain
Обновлялась последний раз: mdnwebdocs-bot,