Как обратиться к элементу CSS?

Question

[slagoris]

Добрый день.
Есть разметка

<input class="check-input" type="checkbox" name="checkbox" id='checkbox' checked  required>
<label  class="check-label" for="checkbox" >Даю согласие на обработку данных</label>

.
Есть стили

.check-input:checked + .check-label::before {
  content: '';
  background: url("../img/checkIcon.svg") center no-repeat;
  background-size: 70%;
}

Это кастомный чекбокс. Все вроде стандартно. Но тут, кое-что прикрутили к сайту, и тепеь это обращение к соседнему селектору через '' + '' не работает, т.к. библиотека там вставляет свои поля, и соседство уже не проходит. Как еще можно обратиться к бифор, при чекнутом чекбоксе, кроме JS не могу ума приложить. JS конечно не проблема, но надо CSS. Обычная галочка свела меня с ума)). Очень буду признателен за варианты.

Comments

[kryamk]

А родственный селектор ~ не подойдёт?

[slagoris]

kryamk, конечно подойдет. Выветривается ,когда не применяешь!!!! СПасибо!!!!

Answer 1

[Сергей Романенко]

Если вы знаете какой именно кастомный код вставляется, вы можете его обойти например вот так:

<input class="check-input" type="checkbox" name="checkbox" id='checkbox' checked  required>
<span>кастомный код</span>
<label  class="check-label" for="checkbox" >Даю согласие на обработку данных</label>

<input class="check-input" type="checkbox" name="checkbox" id='checkbox2' required>
<span>кастомный код</span>
<label  class="check-label" for="checkbox2" >Даю согласие на обработку данных</label>

.check-input:checked + span + .check-label::before {
  content: '';
  background: url("../img/checkIcon.svg") center no-repeat;
  background-size: 70%;
}

Comments

[Алексей Лавров]

Если не подходит + т.к. Элемент теперь не следующий за этим, то можно использовать вместо плюса ~