El primer fill, un selector CSS (first-child), ens permet aplicar l'estil del primer element directament a l'altre element. Segons l'especificació CSS Selectors Level 3, es coneix com una pseudo-classe estructural, ja que basa l'estil de qualsevol contingut en com es relaciona amb el seu contingut principal i germà.
Sintaxi
:first-child { //property } Exemple
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Sortida
Explicació:
- Dues etiquetes div formen el bloc del cos del codi anterior.
- Hi ha moltes etiquetes de paràgraf
amb diverses etiquetes d'ajustament dins del primer element div.
- Una etiqueta de capçalera i una etiqueta de paràgraf
amb una etiqueta snap s'inclouen a l'altra etiqueta div.
- Hem aplicat CSS intern o incrustat dins del bloc de capçalera i hem dissenyat l'etiqueta snap dins de l'etiqueta de paràgraf. Tanmateix, no estem obligats a crear una classe per a l'etiqueta snap; en comptes d'això, podem utilitzar el primer selector secundari (p:first-child) per identificar a l'instant el primer element de l'etiqueta snap dins de la primera etiqueta div. Podem donar una mica d'estil a l'element inicial (snap). Hi ha dues etiquetes d'ajustament dins del paràgraf, però com podem veure, només la primera etiqueta té un estil i les altres s'han ignorat.
- Podem veure com el primer nen va buscar la primera etiqueta d'ajustament i l'ha dissenyat a la segona etiqueta div. L'element ha de ser el primer element entre els seus germans dins de l'etiqueta principal que el primer fill ha d'orientar; en cas contrari, no serà escollit.
Utilitzant elEtiqueta de fila
Utilitzant l'etiqueta de fila
Sintaxi
tr:first-child{ //CSS declarations with style properties; } Exemple
Per a una millor comprensió, mirem un exemple del primer CSS secundari que utilitza l'etiqueta fila
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> Sortida
Explicació:
java priorityqueue
- El bloc del cos del codi anterior conté etiquetes de taula per a la informació de l'estudiant
.
- Hi ha diverses files d'etiquetes
dins de l'etiqueta de la taula , i l'etiqueta de la primera fila té capçaleres com el número de registre, el nom i les notes de l'estudiant. Les dades de l'estudiant es troben a les etiquetes de fila restants.
- Per dissenyar l'etiqueta de fila
dins de l'etiqueta de la taula , hem aplicat CSS intern o incrustat dins del bloc principal. Tanmateix, no estem obligats a crear una classe per a l'etiqueta de fila; en canvi, simplement estem utilitzant el primer selector secundari (p:first-child), que reconeixerà automàticament l'element de l'etiqueta de la primera fila just dins de l'etiqueta de la taula. Podem estilitzar l'etiqueta de fila, que és el primer element. Hi ha diverses files d'etiquetes dins de la taula. No obstant això, com podem veure, la primera etiqueta s'estila mentre que la resta no es té en compte.
Conclusió
Hem conegut el primer fill de CSS en aquest article. Aquí hi ha una conclusió del primer fill a l'article:
- En CSS, el selector del primer fill (:first-child) ens permet aplicar immediatament l'estil del primer element a l'altre element.
- El primer fill dissenya el material en funció de com es relaciona amb el contingut dels seus pares i germans.
- Una pseudo-classe que és membre de les classes basades en la posició i l'estructura és el primer fill. Sense comprovar si hi ha més germans (elements) del mateix tipus, la primera classe intentarà coincidir amb el primer fill immediat del pare.