Combinators and multiple selectors

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

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

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

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

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

<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, чтобы увидеть ответ.

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>  
  <li><a href="#">About</a></li>
</ul>

<h1>Welcome to my website</h1>

<p>Hello, and welcome! I hope you enjoy your time here.</p>

<h2>My philosophy</h2>

<p>I am a believer in chilling out, and not getting grumpy. I think everyone else should follow this ideal, and <a href="#">drink green tea</a>.</p></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">ul {
  padding: 0;
  list-style-type: none;
}

 {
  text-decoration: none;
  display: block;
  color: black;
  background-color: red;
  padding: 5px;
  margin-bottom: 10px;
}

 {
  color: red;
  background-color: black;
}

 {
  font-style: bold;
  color: blue;
}</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;overflow:auto;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'ul {\n  padding: 0;\n  list-style-type: none;\n}\n\nul a {\n  text-decoration: none;\n  display: block;\n  color: black;\n  background-color: red;\n  padding: 5px;\n  margin-bottom: 10px;\n}\n\nul a:hover {\n  color: red;\n  background-color: black;\n}\n\nh1 + p {\n  font-style: bold;\n  color: blue;\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

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

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

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

Или так:

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

Что дальше

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

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