Selettori CSS Combinator | Spiegato

I combinatori in CSS descrivono la relazione tra determinati elementi e sulla base di questa relazione puoi modellare elementi. Questo è utile quando vuoi modellare determinati elementi tutti in una volta piuttosto che lo styling elementi individualmente. Ad esempio, puoi modellare tutti i fratelli generali di un elemento usando il selettore combinatori di fratelli CSS. I selettori CSS Combinator sono i seguenti.

1. Selettore discendente
2. Selettore bambino
3. Selettore di fratelli adiacente
4. Selettore di fratelli generali

Tutti questi sono spiegati in modo approfondito qui.

Selettore discendente

Ai fini della selezione di tutti i successori di un elemento, viene utilizzato il selettore discendente. I successori includono tutti i bambini di un elemento, possa essere un bambino diretto o un bambino più livelli lungo l'albero DOM. È rappresentato usando uno spazio tra il genitore e l'elemento figlio.

Sintassi

genitore figlio
costo dell'immobile;

Esempio

L'esempio seguente mostra il funzionamento del selettore discendente.

Html

Sono un successore del div.

Sono anche un successore del div.

Non sono un successore del div.

Nel codice HTML sopra, abbiamo creato un elemento e nidificato due

elementi all'interno di quel div. Oltre a questo, abbiamo anche creato un

Elemento fuori dall'elemento.

CSS

div
imbottitura: 5px;
Bordo: 2px Black solido;

Div P
Background-color: Pink;

Qui stiamo prima dando un po 'di imbottitura e bordo al div e successivamente usando il combinatori discendente viene dato un colore di sfondo rosa a tutto il discendente

elementi del div.

Produzione

I successori dell'elemento sono evidenziati in rosa.

Selettore bambino

Come suggerisce il nome, il Combinator figlio seleziona tutti i bambini di un elemento. È diverso dal selettore discendente in modo da selezionare solo i bambini diretti di un elemento. Inoltre, è rappresentato da un segno maggiore di (>).

Sintassi

genitore> figlio
costo dell'immobile;

Esempio

Useremo un esempio simile a quello sopra per dimostrare il funzionamento del selettore di combinatori figli.

Html

Questo è un bambino immediato.

Anche questo è un bambino immediato.

Dato che sono presente all'interno dell'elemento sezione quindi, sono un discendente del div ma non un bambino diretto.

Non sono un bambino.

Non sono nemmeno un bambino.

Qui abbiamo creato un div e nidificato due

elementi e un elemento all'interno del div. Il tag nidifica ulteriormente a

elemento. Oltre a questi due altri

Gli elementi sono generati ma al di fuori del div.

CSS

div
imbottitura: 5px;
Bordo: 2px Black solido;

div> p
Background-color: hotpink;

Stiamo usando il combinatore figlio per dare un colore di hotpink al diretto

Figli di Div, inoltre, abbiamo fornito un po 'di imbottitura e confine al Div.

Produzione

Il selettore del combinatori di figli funziona correttamente.

Selettore di fratelli adiacente

Questo selettore viene utilizzato allo scopo di styling dei fratelli adiacenti. È rappresentato usando un segno più (+) tra i due elementi.

Sintassi

elemento + elemento
costo dell'immobile;

Esempio

Supponiamo di voler modellare a

elemento che è un fratello adiacente dell'elemento.

Html

Sono un bambino immediato.

Sono anche un bambino immediato.

Sono un fratello adiacente.

Non sono un fratello adiacente.

Per dimostrare il funzionamento del combinatori di fratelli adiacente abbiamo creato alcuni

elementi all'interno e all'esterno di un elemento.

CSS

div
imbottitura: 5px;
Bordo: 2px Black solido;

Div + P
colore viola;
Font in stile: corsivo;
Font-weight: audace;

Usando il selettore di fratelli adiacente stiamo dando colore viola, stile del carattere in corsivo e peso di carattere audace per adiacente

fratello del div.

Produzione

Il fratello adiacente dell'elemento Div è stato disegnato usando il combinatori di fratello adiacente.

Selettore di fratelli generali

Come suggerisce il nome, questo combinatori CSS stabilisce tutti i fratelli di un elemento che condividono lo stesso genitore. Rappresentato da un segno Tilde (~).

Sintassi

elemento ~ elemento
costo dell'immobile;

Esempio

Useremo l'esempio utilizzato nella sezione sopra per vedere come funziona questo combinatori.

CSS

div ~ p
colore viola;
Font in stile: corsivo;
Font-weight: audace;

Usando il selettore di fratelli generali stiamo dando un po 'di stile a tutti i

fratelli dell'elemento div.

Produzione

Tutti i fratelli generali dell'elemento Div sono stati disegnati con successo.

Conclusione

Un selettore CSS Combinator seleziona elementi sul BAISS della loro relazione con altri elementi. Ci sono quattro selettori di combinatori in CSS. UN selettore discendente stili tutti i successori di un elemento, a Selettore bambino stili i figli diretti di un elemento, un fratello adiacente selettore stili i fratelli di un elemento che arriva subito dopo quell'elemento e a selettore di fratelli generali stili tutti i fratelli di un elemento. Questo post descrive in dettaglio questi combinatori insieme a esempi adeguati.