I selettori in CSS sono le regole che hanno il modello di elementi. Sulla base di questi schemi, gli elementi sono selezionati dal browser e regolati negli stili. In alcuni casi, è necessario modellare gli elementi con un elemento genitore specifico. Ad esempio, se ci sono più elementi "" assegnati con la stessa classe ed è necessario modellare il "div" con il "

"Tag. In tali casi, il ":ha()"Viene utilizzato la Classe pseudo selettore genitore.

Questo post descriverà:

• Come modellare un elemento genitore specificando i suoi elementi figlio?
• Come selezionare tutti gli elementi dei bambini?
• Come selezionare tutti gli elementi dei bambini diretti?

Come modellare un elemento genitore specificando i suoi elementi figlio?

Innanzitutto, crea un file HTML con due elementi "div" come segue:

• Aggiungi due ""Elementi con la stessa classe"genitore-div".
• Il primo contiene due "

  " elementi.

• Il secondo elemento "" contiene "

  " E "

  ":

Ciao

mondo

CIAO

Ho tag "H1"

Se è necessario per modellare l'elemento "" con il "

"Elemento, quindi possiamo regolare lo styling dell'elemento genitore tenendo il figlio. A tale scopo, possiamo utilizzare il ":ha()"Selettore.

Da entrambi gli elementi "", selezionare quello che contiene il "

"Elemento usando".Classe-Name: ha (nome figlio)":

.genitore-div: ha (h1)
Background-color: #103E6D;
Colore: conchiglia;
larghezza: 150px;
Altezza: 150px;
raggio di frontiera: 50%;
Testo-align: centro;

Qui, abbiamo applicato le seguenti proprietà CSS sull'elemento genitore:

• "colore di sfondo"Viene utilizzato per specificare il colore di sfondo dell'elemento.
• "colore"Specifica il colore del testo dell'elemento.
• "larghezza"Viene utilizzato per definire la larghezza dell'elemento.
• "altezza"Specifica l'altezza dell'elemento.
• "raggio di confine"La proprietà viene utilizzata per impostare gli angoli arrotondati dell'elemento.
• "allineamento"Specifica l'allineamento del testo.

Produzione

Come selezionare tutti gli elementi dei bambini?

Per selezionare l'elemento figlio con l'aiuto del selettore genitore, passare attraverso l'esempio dato.

Esempio

Implementa i seguenti passaggi per creare una pagina HTML:

• Aggiungi un elemento div che contiene due "

  "Tag e un""Tag che ha la classe"Child-Div".

• Il bambino "divL'elemento "contiene un"

  "Elemento:

Ciao

mondo

I AM BAMBINO DIV

Possiamo selezionare elementi figlio tramite il genitore "" classe. Questo non solo selezionerà il suo diretto "P"Elementi ma seleziona anche il nidificato"P" elementi:

.genitore-div p
background-color: #7f167f;
Font-Family: corsivo;
Font-size: 25px;
Testo-align: centro;
Colore: Whitesmoke;

Produzione

Come selezionare tutti gli elementi dei bambini diretti?

Per selezionare il figlio diretto del genitore Div, possiamo usare il ">"Simbolo. Ciò contribuirà a selezionare tutti gli elementi "P" che sono il figlio diretto del genitore "". Ad esempio, abbiamo applicato le seguenti proprietà CSS:

.genitore-div> p
background-color: #7f167f;
Font-Family: corsivo;
Font-size: 30px;
Testo-align: centro;
Colore: Whitesmoke;

IL "famiglia di font"Specifica il carattere dell'elemento selezionato e"dimensione del font"Viene utilizzato per definire le dimensioni del carattere:

Produzione

Abbiamo discusso sui selettori dei genitori CSS in HTML e CSS.

Conclusione

In CSS, il “:ha()"Il selettore viene utilizzato come Pseudo-Classe del selettore genitore. È particolarmente usato per selezionare elementi genitori. Ad esempio, ".genitore-div: ha (H1)"Seleziona l'elemento genitore con il"

" elementi. Per selezionare l'elemento figlio dell'elemento genitore, utilizzare ".genitore-div p". L'affermazione delle condizioni può anche essere utilizzata per selezionare tutti gli elementi del bambino diretto. Questo articolo ha spiegato il selettore genitore CSS con esempi.