How to change element style over parent element with Pseudo-class

Question

I want to change another element over parent element by Pseudo-class like following code.

I tried change + to ~ but didn't work.

when p element in parent element. it's worked,

please give me advice.

html

<div class="parent">
 <input type="text"> </input>
</div>

<p class="message">aaaaaaaaa<p/>

scss

.parent{
    input{
       &:focus + .message{
         transition: opacity 0.4s;
         opacity: 1;
      } 
   }
}

.message{
 opacity: 0;
}

Answer 1

You have :has() selector for this in CSS, but it's not well supported so I recommend using Javascript for this kind of work.

const input = document.querySelector('.parent input');
const message = document.querySelector('.message');

// on focused
input.addEventListener('focus', () => {
    message.classList.add('show');
 })

// on not focused
input.addEventListener('blur', () => {
    message.classList.remove('show');
 })

.message{
  opacity: 0;
  transition: opacity 0.4s;
}

/* toggle this class when focused and not-focused */
.message.show {
  opacity: 1;
}

<div class="parent">
 <input type="text" />
</div>

<p class="message">aaaaaaaaa<p/>