why can i not hover the other p element, and get the same reults?

Question

<style>
  div{
    width: 300px;
    height: 300px;
    background-color: blue;
    display: none;
  }
  .hei:hover+div{
    display: block;
  }
</style>

<p class="hei">slm</p>
<br>
<p class="hei">hei</p>
<div class=""></div>

i gave them the same class, but only of the p elements is working. I checked w3 schools, yet could not find anything.

Answer 1

It is because that + selector is only targeting next element, when ~ is targeting all next div's in your case. So your CSS will be like something similar to this :.hei:hover~div.

Here you can find more information about this behavior. Difference between the selectors div + p (plus) and div ~ p (tilde)

ul ~ p {
   color: red;
}

This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

The second tip: don't use https://www.w3schools.com/ for learning, it has poor examples and did not really cover all the informations. Instead go for https://developer.mozilla.org/en-US/

Answer 2

The plus sign + in a css selector means for

p + div 

Selects all <div> elements that are placed immediately after <p> elements

Try it with ~

Selects every element that is a next sibling

  div{
    width: 300px;
    height: 300px;
    background-color: blue;
    display: none;
  }
  .hei:hover~div{
    display: block;
  }

<p class="hei">slm</p>
<br>
<p class="hei">hei</p>
<div class=""></div>