Selettori adiacenti in CSS
Abbiamo parlato spesso di selettori jQuery in questo blog, ma ne esistono di utili ed interessanti anche in CSS. I selettori adiacenti, ad esempio, risultano particolarmente utili nella definizione di regole per i CSS poiché consentono di selezionare componenti del markup che sono fra collegati da un vincolo di prossimità.
La sintassi é la seguente :
A + B {
…………
}
In sostanza, l’elemento “A” e l’elemento “B”, concatenati con l’operatore “+”, seguiranno le regole di stile indicate all’interno delle parentesi graffe qualora l’elemento “B” risulterà adiacente ad “A”.
Vediamo un esempio concreto :
ul + p {
color: #808000
}
In tal caso, si vuole in modo specifico dotare di un colore l’elemento paragrafo p solo qualora sia posto di seguito al tag ‘ul’. In tutti gli altri casi la regola non vale.
I selettori adiacenti sono costrutti compatibili con tutte le versioni più recenti dei più utilizzati browser (Explorer lo supporta dalla versione 7).