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

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

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

Селекторы можно использовать и по одному, но иногда это не достаточно удобно. Селекторы 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>

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

/* Общие стили таблицы */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Все тэги <td>, находящиеся внутри <table>, 
   и все тэги <th>, находящиеся внутри <table>.
   Запятая не является комбинатором, она всего лишь
   позволяет задать нескольким селекторам
   одни и теже CSS-правила */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* Все тэги <th>, находящиеся внутри <thead>,
   которые в свою очередь находятся внутри <table> */
table thead th {
  color: white;
  background: black;
}

/* Все тэги <td>, идущие сразу за другими <td>,
   находящимися внутри <tbody>, которые в свою очередь находятся внутри <table> */
table tbody td + td {
  text-align: center;
}

/* Все тэги <td>, которые являются последними потомками,
   находящимися внутри <tbody>, которые в свою очередь находятся внутри <table> */
table tbody td:last-child {
  text-align: right
}

/* Все тэги <th>, находящиеся в <tfoot>s, 
   которые в свою очередь находятся внутри <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* Все тэги <td>, идущие сразу за тэгами <th>, 
   которые в свою очередь находятся внутри <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* Здесь ставится знак $ перед (псевдоэлемент::before) элементами тэгов <td>, 
   которые являются последними потомками (:last-child),
   входящими в состав элементов класса "with-currency" и также имеющих
   атрибут "lang" со значением "en-US" */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

/* Все псевдоэлементы "after" тэгов <td>, являющихся последними потомками,
   входящие в состав элементов класса "with-currency" и также имеющих
   атрибут "lang" со значением "fr". И по-русски: Здесь ставится знак € 
   после (псевдоэлемент::after) элементов тэгов <td>, которые являются последними 
   потомками (:last-child), входящими в состав элементов класса "with-currency" и 
   также имеющих атрибут "lang" со значением "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.