Как задать стиль элементу после input:focus если input завернут в div?

Question

[Александр Плюснин]

Всем привет, подскажите пожалуйста как лучше поступить в подобной ситуации: Есть поле формы
HTML

<div class="main-page-form-group">
				<input type="text" required>
				<span class="highlight"></span>
				<span class="bar"></span>
				<label>Введите имя</label>
			</div>

Предположим на label я могу применить стили следующим образом при активном состоянии input'а

CSS

.main-page-form-group input:focus ~ label, 
.main-page-form-group input:valid ~ label {
  top:-20px;
  font-size:14px;
  color: #91a7d0;
}

Когда я интегрировал в contact-form-7, получилась ситуация следующая:

HTML

<div class="main-page-form-group">
    <span class="wpcf7-form-control-wrap text-474">
        <input name="text-474" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required <b>main-page-input-field</b>" aria-required="true" aria-invalid="false" type="text"></span> 
        <span class="highlight"></span> 
        <span class="bar"></span>
        <label>Введите имя</label>
</div>

Тоесть Родственность (~)
CSS

.main-page-input-field:focus ~ label, .main-page-input-field:valid ~ label {
  top:-20px;
  font-size:14px;
  color: #91a7d0;
}

уже не будет работать.

Вопрос как стилизовать label при активных псевдоселекторах?

Comments

[Ankhena]

Либо label тоже перенести внутрь span. Либо на JS.

[Александр Плюснин]

Ankhena W: Спасибо за потраченное время

[Ankhena]

Александр Плюснин: Ирония - хорошо, но на CSS никак.
На JQ использовать .has и задавать класс для label.

[Александр Плюснин]

Ankhena W: Я без иронии, уже вчера понял) Спасибо

Answer 1

[Алексей Голягин]

.main-page-form-group>span.wpcf7-form-control-wrap>input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required:focus ~ label, .main-page-form-group>span.wpcf7-form-control-wrap>input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required:valid ~ label {
  top:-20px;
  font-size:14px;
  color: #91a7d0;
}