Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
В нашей последней статье по селекторам мы изучим комбинации и группы селекторов — два способа объединять селекторы, чтобы их было удобнее использовать.
Комбинирование селекторов
Селекторы можно использовать и по одному, но иногда это не достаточно удобно. Селекторы CSS становятся еще более полезными, когда вы начинаете комбинировать их друг с другом, чтобы конкретизировать свой выбор. В CSS есть несколько способов выбирать элементы на основании того, как они соотносятся друг с другом. Эти взаимосвязи выражаются посредством комбинаторов (A и B здесь - это два любых селектора):
| Combinators | Select |
|---|---|
| A, B |
Любой элемент, определяемый 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>
Используем следующую таблицу стилей:
/* Общие стили таблицы */
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: ' €';
}
И все вместе это дает нам такую вот красивую таблицу:
Упражнение: Создание комбинаций селекторов
Приведенный выше пример был предназначен для того, чтобы показать, какой степени сложности можно достичь при помощи комбинаций селекторов. В данном упражнении вам предлагается написать несколько более простых комбинаций. Селекторы надо добавить к правилам, чтобы:
- Оформить те ссылки, что находятся внутри неупорядоченного списка.
- Оформить ссылки, находящиеся внутри неупорядоченного списка, на которые наведен указатель мыши.
- Оформить параграф, идущий сразу же за заголовком верхнего уровня.
Сделав ошибку, вы всегда можете нажать кнопку Reset, чтобы вернуться к исходной версии. Если застрянете, жмите кнопку Show solution, чтобы увидеть ответ.
Playable code 7
<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.