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

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

Конечные селекторы, которые мы рассмотрим, называются комбинаторами, потому что они объединяют другие селекторы таким образом, что дают им полезную связь друг с другом и расположение содержимого в документе.

Необходимые навыки: Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания работы с файлами, базовый HTML (изучение Introduction to HTML), и понимание как работает CSS (изучение CSS first steps.)
Цель: Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.

Селектор потомков

Вы уже сталкивались с селекторами потомков в предыдущих уроках - селекторами с пробелами между ними:

body article p

Эти селекторы выделяют элементы, которые являются потомками других селекторов. Им не нужно быть прямыми потомками, чтобы соответствовать.

В приведенном ниже примере мы сопоставляем только элемент <p>, который находится внутри элемента с классом.box.

Дочерний комбинатор

Дочерний комбинатор - это символ "больше, чем" (>). Совпадение будет выявлено, только если элементы, соответсвующие селектору справа от символа, являются прямыми потомками элементов селектора слева. Все элементы на более низких уровнях иерархии не будут рассматриваться. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селетор пишется так:

article > p

Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.

Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <li> получат верхнюю границу красного цвета.

Смежные селекторы

Соседний родственный селектор ( + ) используется для выбора чего-либо, если он находится рядом с другим элементом на том же уровне иерархии. Например, чтобы выбрать все элементы <img>, которые идут сразу после элементов <p> :

p + img

Распространенный вариант использования - сделать что-то с абзацем, который следует за заголовком, Как в моем примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к < h1>, и стилизуем его.

Если вы вставите какой-то другой элемент, например <h2> между <h1> и <p>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент находится рядом.

Общие элементы потомков

Если вы хотите выбрать одинаковых потомков элемента, даже если они не являются  соседними, то вы можете использовать общий комбинатор потомков (~). Чтобы выбрать все элементы <img>, которые идут в любом месте после элементов <p>, мы сделаем это:

p ~ img

В приведенном ниже примере мы выбираем все элементы <p>, которые идут после <h1>, и даже если в документе есть <div>, то <p>, который идет после него, выбран.

Использование комбинаторов

Вы можете объединить любой из селекторов, которые мы обнаружили в предыдущих уроках, с комбинаторами, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать элементы списка с классом "a", которые являются прямыми потомками a <ul>, я мог бы использовать следующее.

ul > li[class="a"]  {  }

Однако будьте осторожны при создании больших списков селекторов, которые выделяют конкретные части вашего документа. Будет трудно повторно использовать правила CSS, потому, что вы сделали селектор очень специфичным для расположения этого элемента в разметке.

Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.

Двигаемся дальше

Это последний раздел в наших уроках по селекторам. Далее мы перейдем к другой важной части CSS — CSS Box Model.

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS