Il primo figlio, un selettore CSS (first-child), ci consente di applicare lo stile del primo elemento direttamente all'altro elemento. Secondo le specifiche CSS Selectors Level 3, viene definita pseudo-classe strutturale poiché basa lo stile di qualsiasi contenuto su come si relaziona al contenuto genitore e fratello.
Sintassi
:first-child { //property } Esempio
convertire la data della stringa
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Produzione
Spiegazione:
- Due tag div comprendono il blocco body nel codice sopra.
- Ci sono molti tag di paragrafo
con vari snap tag all'interno del primo elemento div.
potatura a-b
- Un tag di intestazione e un tag di paragrafo
con uno snap tag sono entrambi inclusi nell'altro tag div.
- Abbiamo applicato CSS interni o incorporati all'interno del blocco head e stilizzato lo snap tag all'interno del tag paragrafo. Tuttavia, non è necessario creare una classe per lo snap tag; possiamo invece utilizzare il selettore del primo figlio (p:first-child) per identificare immediatamente il primo elemento dello snap tag all'interno del primo tag div. Possiamo dare uno stile all'elemento iniziale (snap). Ci sono due snap tag all'interno del paragrafo ma, come possiamo vedere, solo il primo tag ha uno stile e gli altri sono stati ignorati.
- Possiamo vedere come il primo figlio ha cercato il primo snap tag e gli ha assegnato uno stile nel secondo tag div. L'elemento deve essere il primo elemento tra i suoi fratelli all'interno del tag genitore ad essere preso di mira dal primo figlio; in caso contrario, non verrà scelto.
Usando ilEtichetta di riga
Utilizzando il tag riga
Sintassi
tr:first-child{ //CSS declarations with style properties; } Esempio
metodo Java tostring
Per una migliore comprensione, diamo un'occhiata a un esempio del primo CSS figlio utilizzando il tag row
Example of First Child in CSS using row tag tr:first-child { font-size: 40pixels; color: black; background-color: lightblue; } <table class="table"> <tr> <th>Name</th> <th>ID</th> <th>Branch</th> </tr> <tr> <th>Priya</th> <th>123</th> <th>CSE</th> </tr> <tr> <th>John</th> <th>435</th> <th>ECE</th> </tr> <tr> <th>David</th> <th>544</th> <th>MECH</th> </tr> <tr> <th>Sushma</th> <th>765</th> <th>CIVIL</th> </tr> </table> Produzione
Spiegazione:
- Il blocco del corpo del codice sopra contiene i tag della tabella per le informazioni sullo studente
.
- Sono presenti diverse righe di tag
all'interno del tag della tabella e il tag della prima riga ha intestazioni come il numero di ruolo, il nome e i voti dello studente. I dati dello studente sono contenuti nei rimanenti tag della riga.
- Per definire lo stile del tag riga
all'interno del tag della tabella , abbiamo applicato CSS interni o incorporati all'interno del blocco head. Tuttavia, non è necessario creare una classe per il tag riga; invece, stiamo semplicemente utilizzando il selettore del primo figlio (p:first-child), che riconoscerà automaticamente l'elemento tag della prima riga proprio all'interno del tag table. Possiamo dare uno stile al tag row, che è il primo elemento. All'interno della tabella sono presenti diverse righe di tag. Tuttavia, come possiamo vedere, al primo tag viene assegnato uno stile mentre gli altri vengono ignorati.
Conclusione
Abbiamo saputo del primo figlio della CSS in questo articolo. Ecco una conclusione del primo figlio nell'articolo:
- Nei CSS, il selettore del primo figlio (:first-child) ci consente di applicare immediatamente lo stile del primo elemento all'altro elemento.
- Il primo figlio modella il materiale in base a come si relaziona al contenuto dei suoi genitori e fratelli.
- Una pseudo-classe che è membro delle classi basate sulla posizione e sulla struttura è il primo figlio. Senza verificare la presenza di più fratelli (elementi) dello stesso tipo, la prima classe tenterà di corrispondere al primo figlio immediato del genitore.