Какие знаешь комбинаторы

«Какие знаешь комбинаторы» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

В CSS есть несколько комбинаторов для связи селекторов: 1. **Пробел** (потомок) — выбирает все элементы-потомки: `div p { color: red; }` — все `

` внутри `

` 2. **>** (дочерний) — только прямые потомки: `ul > li { margin: 0; }` — только `
  • `, которые являются прямыми детьми `
      ` 3. **+** (соседний) — следующий элемент сразу после: `h2 + p { font-size: 1.2em; }` — первый `

      ` после `

      ` 4. **~** (родственный) — все элементы одного уровня после: `h2 ~ p { color: blue; }` — все `

      ` на том же уровне после `

      ` Пример: ``` /* Все ссылки в списке */ ul a { color: green; } /* Только ссылки в пунктах меню */ nav > ul > li > a { font-weight: bold; } ```