How to set property on an external element

Question

From the image. How would you be able to apply a property to the label from the focus of the input?

I saw some examples but that only work if the label immediately after the input. Then it would be enough to use the + of the css .. but in this case it is one level outside the parent input.

this only works if the label is immediately after the input. It's not the case.

.container input:focus + label{
    font-size: 12px !important;
    margin-top: 0 !important;
}

Please **never** post images of code, always real code. – connexo Aug 30 '20 at 21:23 — connexo, Aug 30 '20 at 21:23
@connexo, pardon! – Renato Souza de Oliveira Aug 30 '20 at 21:33 — Renato Souza de Oliveira, Aug 30 '20 at 21:33
https://stackoverflow.com/a/46406959/8620333 – Temani Afif Aug 30 '20 at 21:38 — Temani Afif, Aug 30 '20 at 21:38

score 2 · Accepted Answer · answered Aug 30 '20 at 21:25

2

You can use the :focus-within pseudo-class as well as the ~ selector.

div.input:focus-within ~ label {
  color: red;
}

<div class="input">
  <input type="text">
</div>
<label for="">label</label>

answered Aug 30 '20 at 21:25

Simplicius

2,009
1
5
19

How to set property on an external element

1 Answers1