grupos hijos y hermanos

[lobopk2]

Aqui hay algo que no entiendo bien, tengo este codigo.

Código HTML:

<g class="menu1">
    
            <rect class="r1" id="r1" y="194.1px" x="370.6"/>
            <text class="t1" id="t1" transform="scale(1.109 .9019)" y="244.39044" x="390.77103">1</text>
                        
            <g class="Azul1">
            <rect class="azul" id="azul1" x="370.6px" y="227.3" height="-10" width="151.9" />
            <text class="tazul" id="tazul1" y="281.02484" x="392.54208" transform="scale(1.109 .9020)">1</text>             
            
            <g class="Verde1">  
            <rect id="verde1" class="verde1" y="227.4" x="523.5" height="-10" width="151.9" />
            <text id="tverde1" class="tverde1" transform="scale(1.109 .9019)" y="281.14017" x="530.53497">1</text>
            </g>
            </g>
</g>
 

si yo le pongo en css la intruccion

.menu1:hover #azul1 {height:32.07px;}

Entonces azul1 se visualiza, esto me esta dando a entender que la <rect azul1> es hijo de <g menu1>, esto puedo llegar a entenderlo.

ahora bien si yo le digo:

#azul1:hover ~ #verde1 {height:32.07px;}

esto no funciona, creia que eran hermanos, pero parece ser que no lo son.


Claro si yo hago:

.Azul1:hover .verde1 {height:32.07px;}

funciona y Azul1 es el padre de .verde1

Entonces si Azul1 es el padre de #azul1 y de .verde1, porque #azul1 y .verde1 no son hermanos? esto es algo que no comprendo bien, que es lo que esta pasando?

Espero haberme explicado bien gracias :)