css affect other elements on hover

1//cube is directly inside the container:
2#container:hover > #cube { background-color: yellow; }
3
4//cube is next to (after containers closing tag) the container:
5#container:hover + #cube { background-color: yellow; }
6
7//If the cube is somewhere inside the container:
8#container:hover #cube { background-color: yellow; }
9
10//If the cube is a sibling of the container:
11#container:hover ~ #cube { background-color: yellow; }

1#container:hover ~ #cube { background-color: yellow; }
2

1#container:hover #cube {
2    background-color: yellow;   
3}
4

1#container:hover ~ #cube { background-color: yellow; }

1#container {
2  width: 200px;
3  height: 30px;
4  border: 1px solid var(--c);
5  --c:red;
6}
7#container:hover {
8  --c:blue;
9}
10#container > div {
11  width: 30px;
12  height: 100%;
13  background-color: var(--c);
14}