Corsi on-line

CSS: relazioni tra i selettori tramite combinators

In CSS i combinators sono delle componenti che indicano la presenza di specifiche relazioni tra i selettori utilizzati per la definizione delle regole di stile. Tecnicamente un selettore CSS è in grado di contenere a sua volta ulteriori selettori (simple selectors), tra questi ultimi è quindi possibile definire un rapporto di correlazione tramite combinator che viene rappresentato da un simbolo differente a seconda della sua tipologia.

css3Nello specifico abbiamo 4 tipi di combinators utilizzabili in CSS3

  • selettori discendenti, simboleggiati da uno spazio vuoto;
  • selettori figli (child selectors), simboleggiati dal segno “maggiore” (>);
  • adjacent sibling selectors, simboleggiati dal segno “più”(+);
  • general sibling selectors, simboleggiati dalla “tilde” (~).

Un selettore discendente abbina qualsiasi componente che discende da un determinato elemento; l’esempio seguente mostra un selettore dove vengono selezionati tutti gli elementi p interni ad una divbox:

div p {
    background-color: red;
}

Un selettore figlio abbina qualsiasi componente figlio di un determinato elemento; nell’esempio seguente vengono selezionati tutti gli elementi p figli di componente div:

div > p {
    background-color: red;
}

Un adjacent sibling selector seleziona tutti gli elementi che seguono immediatamente una componente parent, tra tali elementi esiste quindi un rapporto diretto di “fratellanza”. Il codice seguente mostra un selettore nel quale vengono selezionati tutti gli elementi p posizionati immediatamente dopo gli elementi div:

div + p {
    background-color: red;
}

Un general sibling selector seleziona tutti gli elementi che seguono una componente parent, tra tali elementi esiste quindi un rapporto di “parentela”. Il codice seguente mostra un selettore nel quale vengono selezionati tutti gli elementi p imparentati con elementi div:

div ~ p {
    background-color: red;
}

Un semplice esempio di utilizzo di combinators multipli potrebbe essere il segunte, nello stesso codice è possibile modificare il rapporto di parentela da “adiacente” a generale.

<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: grey;
}
div > p {
background-color: green;
}
div + p {
background-color: red;
}
</style>
</head>
<body>
<div>
<p>p interno ad un elemento div.</p>
<span><p>p interno ad un elemento span dentro un elemento div.</p></span>
</div>
<p>p esterno ad un elemento div.</p>
</body>
</html>
Post correlati
I più letti del mese
Tematiche