MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Combinators and multiple selectors

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

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

Комбинирование селекторов

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

Combinators Select
AB Любой элемент, определяемый одновременно и A и B.
A B Любой элемент, определяемый селектором B и являющийся потомком элемента, определяемого A (потомком любой степени глубины).
A > B Любой элемент, определяемый B и являющийся непосредственным потомком (direct child) элемента, определяемого A.
A + B Любой элемент, определяемый B и являющийся следующим по счету сиблингом элемента A (то есть следующий по счету потомок того же родителя.)
A ~ B Любой элемент, определяемый B и являющийся одним из следующих сиблингов элемента A (то есть одним из следующих потомков того же родителя.)

Примеры комбинаторов

Теперь посмотрим, как это все вместе работает:

<table lang="en-US" class="with-currency">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Qty.</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total:</th>
      <td>148.55</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Lawnchair</td>
      <td>1</td>
      <td>137.00</td>
    </tr>
    <tr>
      <td>Marshmallow rice bar</td>
      <td>2</td>
      <td>1.10</td>
    </tr>
    <tr>
      <td>Book</td>
      <td>1</td>
      <td>10.45</td>
    </tr>
  </tbody>
</table>

Используем следующую таблицу стилей:

/* Basic table setup */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* All <td>s within a <table> and all <th>s within a <table>
   Comma is not a combinator, it just allows you to target
   several selectors with the same CSS ruleset */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* All <th>s within <thead>s that are within <table>s */
table thead th {
  color: white;
  background: black;
}

/* All <td>s preceded by another <td>,
   within a <tbody>, within a <table> */
table tbody td + td {
  text-align: center;
}

/* All <td>s that are a last child,
   within a <tbody>, within a <table> */
table tbody td:last-child {
  text-align: right
}

/* All <th>s, within a <tfoot>s, within a <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* All <td>s preceded by a <th>, within a <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* All pseudo-elements "before" <td>s that are a last child,
   appearing within elements with a class of "with-currency" that
   also have an attribute "lang" with the value "en-US" */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

/* All pseudo-elements "after" <td>s that are a last child,
   appearing within elements with the class "with-currency" that
   also have an attribute "lang" with the value "fr" */
.with-currency[lang="fr"] td:last-child::after {
  content: ' €';
}

И все вместе это дает нам такую вот красивую таблицу:

Упражнение: Создание комбинаций селекторов

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

  1. Оформить ссылки те ссылки, что находятся внутри неупорядоченного списка.
  2. Оформить ссылки, находящиеся внутри неупорядоченного списка, на которые наведен указатель мыши.
  3. Оформить параграф, идущий сразу же за заголовком верхнего уровня.

Сделав ошибку, вы всегда можете нажать кнопку Reset, чтобы вернуться к исходной версии. Если застрянете, жмите кнопку Show solution, чтобы увидеть ответ.

Несколько селекторов в одном правиле

Вы уже видели множество таких примеров, но проговорим это еще раз, для ясности. Можно записать несколько селекторов, разделив их запятыми, чтобы применить одно и то же правило к нескольким наборам выбранных элементов одновременно. Например:

p, li {
  font-size: 1.6em;
}

Or this:

 h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

Что дальше

Поздравляем, вот и подошло к концу наше довольно длительное путешествие в мир Селекторов. Даже самые искушенные веб разработчики не перестают поражаться, как много можно делать с их помощью — не расстраивайтесь, если не смогли запомнить все  — сохраните страницу по селекторам и возвращайтесь к ней по мере надобности.

В нашей следующей статье мы обратимся к другой важной теме — к тому, какие виды значений могут иметь значения свойств, и какие единицы используются для выражения длины, цвета и других значений. Изучим Значения и единицы измерения в CSS.

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

 Внесли вклад в эту страницу: mgalkina
 Обновлялась последний раз: mgalkina,