How to refer to an element above in the DOM in CSS?

Question

css

Good afternoon!
There is a code.

<label class="account-info__type">
  <input name="radio" type="radio">
  <div>
    <span class="account-info__radio"></span>
    <p class="account-info__name">Person Account</p>
    <p class="account-info__des">A single type of use</p>
  </div>
  <img src="assets/vector/person.svg" alt="Person Account">
</label>

How can I access the label when the input is clicked?
That is, this is how you can refer to an element that is lower in the DOM

.account-info__type > input[type=radio]:checked + div > .account-info__radio {
    border: 5px solid #249AF3;
}

Is it possible to refer to the DOM element above in CSS?

Answer 1

There is no way in CSS to handle a click on an element, let's start with that. And you can’t contact the parent, only from the parent to the child or to the neighbor

Answer 2

Your task is easier to solve, and without js, if I understand its essence correctly:

<input id="input_id" name="radio" type="radio">
<label for="input_id" class="account-info__type">
  <div>
    <span class="account-info__radio"></span>
    <p class="account-info__name">Person Account</p>
    <p class="account-info__des">A single type of use</p>
  </div>
  <img src="assets/vector/person.svg" alt="Person Account">
</label>

input:checked + label {
    border: 5px solid #249AF3;
}