El primer hijo, un selector CSS (primer hijo), nos permite aplicar el estilo del primer elemento directamente al otro elemento. Según la especificación CSS Selectors Level 3, se la conoce como pseudoclase estructural ya que basa el estilo de cualquier contenido en cómo se relaciona con su contenido principal y hermano.
Sintaxis
:first-child { //property } Ejemplo
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Producción
Explicación:
- Dos etiquetas div componen el bloque del cuerpo en el código anterior.
- Hay muchas etiquetas de párrafo.
con varias etiquetas snap dentro del primer elemento div.
jframe
- Una etiqueta de encabezado y una etiqueta de párrafo
con una etiqueta snap se incluyen dentro de la otra etiqueta div.
- Hemos aplicado CSS interno o incrustado dentro del bloque principal y hemos diseñado la etiqueta de ajuste dentro de la etiqueta de párrafo. Sin embargo, no estamos obligados a crear una clase para la etiqueta instantánea; en su lugar, podemos usar el primer selector secundario (p:first-child) para identificar instantáneamente el primer elemento de etiqueta instantánea dentro de la primera etiqueta div. Podemos darle algo de estilo al elemento inicial (snap). Hay dos etiquetas de ajuste dentro del párrafo, pero como podemos ver, solo se aplica estilo a la primera etiqueta y las demás se han ignorado.
- Podemos ver cómo el primer niño buscó la primera etiqueta instantánea y le dio estilo en la segunda etiqueta div. El elemento debe ser el primer elemento entre sus hermanos dentro de la etiqueta principal al que se dirigirá el primer elemento secundario; de lo contrario, no será elegido.
Utilizando elEtiqueta de fila
Usando la etiqueta de fila
Sintaxis
tr:first-child{ //CSS declarations with style properties; } Ejemplo
Para una mejor comprensión, veamos un ejemplo del primer CSS secundario que usa la etiqueta de 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> Producción
Explicación:
- El bloque del cuerpo del código anterior contiene etiquetas de tabla para la información del estudiante.
.
- Hay varias filas de etiquetas.
dentro de la etiqueta de la tabla y la etiqueta de la primera fila tiene encabezados como el número de lista, el nombre y las calificaciones del estudiante. Los datos del estudiante están contenidos en las etiquetas de fila restantes.
- Para diseñar la etiqueta de fila
dentro de la etiqueta de la tabla , hemos aplicado CSS interno o incrustado dentro del bloque principal. Sin embargo, no estamos obligados a crear una clase para la etiqueta de fila; en su lugar, simplemente usamos el primer selector secundario (p:first-child), que reconocerá automáticamente el elemento de etiqueta de la primera fila justo dentro de la etiqueta de la tabla. Podemos aplicar estilo a la etiqueta de fila, que es el primer elemento. Hay varias filas de etiquetas dentro de la tabla. Sin embargo, como podemos ver, se aplica estilo a la primera etiqueta mientras que el resto se ignora.
Conclusión
Aprendimos sobre el primer hijo de CSS en este artículo. Aquí hay una conclusión del primer hijo en el artículo:
- En CSS, el selector del primer hijo (:first-child) nos permite aplicar inmediatamente el estilo del primer elemento al otro elemento.
- El primer hijo diseña el material en función de cómo se relaciona con el contenido de sus padres y hermanos.
- Una pseudoclase que es miembro de las clases basadas en posición y estructura es el primer hijo. Sin comprobar si hay más hermanos (elementos) del mismo tipo, la primera clase intentará hacer coincidir con el primer hijo inmediato del padre.