Ragazzi ho una confusione bestiale in testa.

I selettori gerarchici da quanto ho capito sono 3 ">" "+" "~"

> sta per padre-figlio

+ sta per precedente-seguente

~ sta per precedente-adiacente

Ok questo più meno penso di averlo capito, se sono padre e figlio praticamente io do una regola a tutti gli elementi che vengono contenuti nel padre diciamo

quindi

<div class='padre'>
qua ci saranno tutti i figli
.
.
.
</div>

se però diciamo io ho il caso

<div class='padre'>
<div class='figlio1'>
<div class='nipote'>
questo non verrà considerato
</div>
</div>
<div class='figlio2'>
</div>
</div>

In questo caso i 2 figli vengono presi in considerazione mentre i nipoti per così dire non saranno considerati giusto?

Ora considerando che il "+" serve solo a selezionare quello subito dopo, e invece "~" serve a selezionare tutti i campi che sono presenti dentro a quello selezionato, come faccio a selezionare il div nipote, e o pronipote e così via?

Il mio caso è che dentro al div nipote io ho un pulsante che mostra il figlio2 per esempio però se io do .padre > .nipote questo non viene considerato, perchè .nipote è figlio di .figlio... oltretutto essendo una struttura dinamica dove io avrò più .padre uno affianco all'altro mi tocca usare this per dire che se io mostro una parte nascosta di un padre, non mi mostri quella di tutte.

Finchè sono padre e figlio non ho problemi, do la funzione

$(".padre > . figlio").click(function(){
$('~ .nipote',this).toggle();

ma se sono annidati?