Разрыв CSS при переносе элемента в новый div (селектор брата)

Question

У меня есть следующая цепочка селекторов HTML и CSS:

<div className="form-group">
    <div class="control-custom-checkbox position-relative">
        <input type="checkbox" class="custom-input" id="check1" checked>
        <label className="custom-label" htmlFor="check1"></label>
    </div> 
</div>

.control-custom-checkbox .custom-input:checked~.custom-label::after { }

Затем я добавил еще один div в HTML:

<div class="form-group">
    <div class="control-custom-checkbox position-relative">
       <div class="required">
          <input type="checkbox" class="custom-input" id="check1" checked>
       </div> 
       <label class="custom-label" htmlFor="check1"></label>   
    </div>
</div>

Я поместил разметку вновый <div class="required"> и мои стили сломались.Как мне изменить мой селектор CSS?

Answer 1

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

Вы можете проверить это там: https://codepen.io/anon/pen/BELXqW

Answer 2

Проблема заключалась в том, что вы использовали 'sibling selector' в вашем CSS-селекторе (~).

Это требует, чтобы ваш элемент .custom-label был родным (то есть следующимдруг другу в дереве DOM) элемента .custom-input.Когда вы добавили дополнительный div, он нарушил это отношение (они больше не были «рядом» друг с другом), поэтому это нарушило ваш стиль.(Тот факт, что у div был класс required, не имеет значения).

Не существует одного размера, подходящего для всех исправлений для такого рода проблемы, но наиболее безопасным было бы, вероятно, настроить HTML так, чтобы онипродолжайте быть братьями и сестрами.

<div class="form-group">
      <div class="control-custom-checkbox position-relative">
          <div class="required">
              <input type="checkbox" class="custom-input" id="check1" checked>
              <label class="custom-label" htmlFor="check1"></label>
          </div> 
      </div> 
  </div>

(Или, как предлагается в комментарии, просто добавьте required в существующую обертку.)

Если, однако, это невозможнонекоторая причина.Возможно, вам удастся убрать требование выбора родного брата.Например,

.control-custom-checkbox .custom-label::after {
    /* Your CSS here */
}

Конечно, этот селектор мог быть помещен туда по какой-то причине, и его удаление может иметь непреднамеренные побочные эффекты, особенно если это повлияет на большую кодовую базу.Вы должны будете сами судить, безопасно ли удалить этот селектор брата.Я полагаю, что было бы хорошо, если бы .control-custom-checkbox всегда содержал HTML, структурированный так же, как ваш пример, но невозможно быть уверенным, не зная больше о проекте.