Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
В нашей последней статье по селекторам мы изучим комбинации и группы селекторов — два способа объединять селекторы, чтобы их было удобнее использовать.
Комбинирование селекторов
Селекторы можно использовать и по одному, но иногда это не достаточно удобно. Селекторы 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.