Not understanding the General sibling combinator in CSS (~)

I'm learning different css selectors and with the example given people I don't understand why div4 is selected. As the id div4 is not sibling to div3? Because to me it's a child but maybe because it's only divs I got it wrong or it's the definition of sibling that is wrong?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<style>
    div ~ div{
        color: red;
    }
</style>
<div id="div1">
    div1
    <div id="div2">div2</div>
    <div id="div3">
        div3
        <div id="div4">div4</div>
        <div id="div5">div5</div>
    </div>
</div>

<!-- end snippet -->

I would have expected only div3 as sibling of div2 and div5 as sibling of div4 to be selected.

So can anyone explain what I'm getting wrong or why is that that div4 is selected?

It's because the css color property is inherited from the parent.

https://developer.mozilla.org/en-US/docs/Web/CSS/color

> Inherited yes

https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

> inherited properties, which by default are set to the computed value
> of the parent element

So the scenario you are addressing is not striclty bound to the sibling selector per se.

You can see here that having that rule specifically addressing the #div3 will set that property to all its children as inherited:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#div3{
  color: red;             /*inherited .. applied also to descendants*/
  border: solid 1px blue; /*not inherited .. applies only to selected elements*/
}

<!-- language: lang-html -->

<div id="div1">
  div1
  <div id="div2">div2</div>
  <div id="div3">
    div3
    <div id="div4">div4<span>[span further descendant]</span></div>
    <div id="div5">div5</div>
  </div>
</div>

<!-- end snippet -->