Понять комбинаторные селекторы и селекторы потомков в CSS

Периодически я сталкиваюсь с проблемой - не хочу ставить лишний класс элементу внутри различных кнопок, ссылок и label-ов. Зачастую это текст, который нужно подсветить или галочка чекбокса или маленькая иконка.

Как же справиться с такой проблемой? Тут самым простым и понятным решением будет наследование. Возьмём код ссылки с иконкой, которую нужно анимировать:

<a href="#" class="text_arrow-btn">
  <span>Все товары</span>
  <svg width="37" height="15" viewBox="0 0 37 15" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 7.5H36M36 7.5L31.1538 0.5M36 7.5L31.1538 14.5" stroke="#323F4C"></path>
  </svg>
</a>

Сделать это несложно, достаточно просто прописать несколько правил:

/*БАЗОВЫЕ ПРАВИЛА*/
a {
  text-decoration: none;
  color: inherit;
  font-family: sans-serif;
}

.text_arrow-btn {
  display: flex;
  align-items: center;
  font-size: 22px;
  line-height: 142%;
}

/*ИСПОЛЬЗОВАНИЕ НАСЛЕДОВАНИЯ*/
.text_arrow-btn span { /*Для span которые внутри ссылки*/
  margin-right: 16px;
}

.text_arrow-btn svg { /*Для svg которые внутри ссылки*/
  transition: transform 0.3s;
  width: 36px;
  height: 14px;
}

.text_arrow-btn:hover span {
  text-decoration: underline;
}

.text_arrow-btn:hover svg {
  transform: translateX(12px);
}

Пробел обращается ко всем детям элемента с подходящим селектором. Символ "больше" > обратится только к прямому потомку.

Да, в CSS выглядет не очень, но в SASS всё уже немного приятнее:

a 
  text-decoration: none
  color: inherit
  font-family: sans-serif
  color: #323F4C


.text_arrow-btn
   display: flex
   align-items: center
   span
      margin-right: 16px
   svg
      transition: transform 0.3s
      width: 36px
      height: 14px
   path
      transition: stroke 0.3s
   &:hover
      svg
         transform: translateX(12px)
      span
         text-decoration: underline
   &:active
      color: #B6B5B5
      path
         stroke: #B6B5B5

Думаю что этим я глаза никому не открыл - вполне стандартная история.

Соседний комбинатор - "+"

Однако, на этом мы не останавливаемся. Теперь другая задача - стилизация чекбокса. Если вы хоть раз сталкивались с этой проблемой, то вы знаете лицо боли. Потому что убрать стандартные стили просто так не получится, получится только убрать чекбокс к чёртовой бабушке и стилизовать заново из div или span. Но чтобы добавить неинтерактивным элементам интерактивности придётся использовать JS. Или не придётся?..

Тут нам поможет волшебный + - это комбинатор родственных элементов. Он объединяет два элемента, находящихся на одном уровне, и второй должен следовать СРАЗУ за первым.

Звучит сложно - работает просто. Выбирается следующий сразу за элементом селектор. Вот так:

<label class="main-checkbox">
  <input type="checkbox">
  <span>
    <svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1 3.85714L5.30435 9L12 1" stroke="#323F4C"></path>
    </svg>
  </span>
</label>

.main-checkbox
   cursor: pointer
   span
      display: inline-block
      width: 24px
      height: 24px
      background: #F8F8F8
      display: flex
      align-items: center
      justify-content: center
      transition: background 0.3s
      svg
         width: 12px
         height: 9px
         opacity: 0
         transition: opacity 0.3s
   &:hover
      span
         background: #EBEBEB
   input
      display: none
      &:checked+span /*вот он*/
         background: #F8F8F8
         svg
            opacity: 1

Обращаем внимание на: &:checked+span тут "+" говорит нам о том, что будет выбран следующий за чекнутым input span. И вуаля - чекбокс работает как часы и он стилизован.

Родственный комбинатор - "~"

Но мы не останавливаемся. Имеем ещё одну задачу: чекбокс у которого внутри идёт span и svg одновременно и нужно при наведении изменить цвет и текста и svg. Да, можно обернуть элементы в div и использовать +, но фу, лишний тег - это полный отстой.

Тут нам поможет тильда ~ (не путать с тильтом). Этот символ не выражает усталость и безысходность - совсем наоборот. Он даёт нам выбрать теги, находящиеся на одном уровне с элементом.

Вот наш чекбокс с иконкой:

 <label class="radio-sort">
   <input type="checkbox">
   <span>По возрастанию цены</span>
   <svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M5.5 14V1M5.5 1L10 5.78947M5.5 1L1 5.78947" stroke="#323F4C" />
   </svg>
</label>

И вот стили:

.radio-sort
   font-family: sans-serif
   margin-right: 48px
   cursor: pointer
   display: flex
   align-items: center
   &:last-child
      margin-right: 0
   input
      display: none
   span
      display: inline-block
   svg
      width: 10px
      height: 14px
      display: inline-block
      margin-left: 12px
   input:checked + span
      font-weight: 800
   input:hover + span
      color: #1eaf9f
   input:hover ~ svg
      path
         stroke: #1eaf9f

тильда выберет следующий за span svg - очень удобно!

Итак, подведём итог.

Пробел - выберет все дочерние элементы, соответствующие селектору:

Знак больше > выберет только дочерние элементы, являющиеся прямыми потомками:

Знак + выберет следующего за элементом потомка:

Тильда ~ выберет всех одноуровневых потомков: