doubts about css action in div

Question

Good guys I would like to know how I can make a div trigger the None display when I’m with Focus in the ex input code

//CSS
.email:focus > div.oculta{
     display:none;
}
//HTML
<div class="form">
  <input type="text" class="email" name="email" placeholder="email" />
</div>

<div class="oculta">
<!-- Isso Aqui terá que ficar display none a partir do focus na input form  -->
teste
</div>

how can I make it work?

Answer 1

Your CSS selector is applying display: none for a div.oculta son of a .email:focus. In its HTML, the div.oculta will not be affected as it is not the son of .email:focus.

That way, you could make it work: using the dial ~ or +, that select elements followed:

.email:focus + div.oculta{
     display:none;
}

<div class="form">
  <input type="text" class="email" name="asdasd" placeholder="email" />
  <div class="oculta">
    teste
  </div>
</div>

In case you want to hide the div.oculta with HTML this way, it will not be possible to use CSS selectors to reach it from .email:focus. Therefore, you will need a Javascript event onFocus linked to the widget. For example:

document.querySelector('.email').onfocus = function() {
    document.querySelector('.oculta').style.display = "none";
}

document.querySelector('.email').onfocusout = function() {
    document.querySelector('.oculta').style.display = "block";
}