Ciao, in linea di massima concordo con n1k4r0.
Attualmente lo standard CSS non supporta la selezione di elementi genitori (anche se ci sono in ballo delle proposte per tale integrazione), per cui non è possibile agire su elementi genitori attraverso elementi figli/discendenti. La selezione degli elementi avviene sempre in modo discendente e progressivo secondo la disposizione gerarchica degli elementi del DOM, ovvero non è possibile avere una selezione ascendente (e, giusto per chiarire, nemmeno una selezione disgiunta).
In questi casi è sempre buono ricordarsi che, anche proprio per questo motivo, si parla di CSS, cioè "
Cascading Style Sheets", per cui la selezione degli elementi (nonché l'applicazione delle regole stesse) avviene sempre a "cascata".
Giusto per capirci: hai mai provato a nuotare controcorrente per risalire una cascata? Chiaramente l'esito non può che essere negativo, anche nel caso tu fossi Francesca Pellegrini in persona.
Però, volendo puoi sempre usare un elicottero per poter tornare in cima alla cascata.
Nel tuo caso l'elicottero si chiama JavaScript.
Chiaramente con qualche riga di JavaScript puoi risolvere il problema in modo relativamente semplice.
Tuttavia, in diversi casi, è possibile aggirare l'ostacolo sempre via CSS con l'uso di qualche barbatrucco.
Giusto per diletto, o provato a creare una soluzione secondo ciò che hai chiesto.
Ho risolto utilizzando il
pseudo-elemento/pseudo-classe :before che andrà a posizionarsi sullo sfondo del div contenitore, con l'effetto visivo di cambiarne il colore, anche se tecnicamente si tratta di una sovrapposizione di elementi.
Qui un esempio di una possibile situazione. Ho immaginato la presenza di più elementi .sub e la possibilità di definire diversi colori (chiaramente sono tutte cose in più rispetto alle più semplici indicazioni del primo post):
Codice:
<style type="text/css">
/* un po' di style sui contenitori */
.container {
position: relative;
background-color: grey;
padding: 10px;
color: white;
text-shadow: 0 1px 2px black;
z-index: 0;
}
.sub {
background-color: silver;
margin: 10px;
padding: 10px 10px 10px 0;
}
.sub>a {
font-weight: bold;
background-color: black;
padding: 0 10px;
}
/* la mia paletta dei colori */
.sub>a.giallo {color: yellow;}
.sub>a.giallo:before {background-color: yellow;}
.sub>a.rosso {color: red;}
.sub>a.rosso:before {background-color: red;}
.sub>a.rosa {color: violet;}
.sub>a.rosa:before {background-color: violet;}
.sub>a.celeste {color: cyan;}
.sub>a.celeste:before {background-color: cyan;}
.sub>a.verde {color: green;}
.sub>a.verde:before {background-color: green;}
.sub>a.arancione {color: orange;}
.sub>a.arancione:before {background-color: orange;}
/* quando sono sopra <a>, creo un before che va a coprire lo sfondo del container, colorandolo */
.sub>a:hover:before {
content: '';
position: absolute;
top:0; right:0; bottom: 0; left:0;
z-index: -2;
}
/* questo occorre per impedire l'hover involontario sui before dei .sub>a, così da evitare che lo sfondo resti colorato anche uscendo da <a> */
.container:before {
content: '';
position: absolute;
top:0; right:0; bottom: 0; left:0;
z-index: -1;
}
</style>
Codice:
<div class="container">
container
<div class="sub uno">
sub uno<br>
<a href="#" class="uno celeste">1_1</a>
<a href="#" class="due verde">1_2</a>
</div>
<div class="sub due">
sub due<br>
<a href="#" class="uno giallo">2_1</a>
<a href="#" class="due arancione">2_2</a>
</div>
<div class="sub tre">
sub tre<br>
<a href="#" class="uno rosso">3_1</a>
<a href="#" class="due rosa">3_2</a>
</div>
</div>
Sia chiaro che si tratta pur sempre di un accrocchio e che JavaScript si presta sicuramente meglio in questo tipo di situazioni.
