¿Cómo seleccionar el primer elemento dentro de un documento html?
first-of-type:
Es un selector o pseu-doclase de css que representa el primer elemento (de su tipo) entre un sin numero de elementos del documento html.
Osea:
Si tenemos varios <h1>, <div> ,<input> o cualquier otro elemento solo hará referencia al primero de su clase.
(Si no deseas leer te dejo un vídeo corto de first-of-type.😜)
Sintaxis:
elemento:first-of-type {
/* Los atributos a modificar */
}
Ejemplo:
Cambiar el tamaño del primer elemento <label> que se encuentra en el documento html.
HTML
En este ejemplo crearemos un formulario de inicio de sesión.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="/my-handling-form-page" method="post">
<label>Inicio de sesión</label>
<label for="name">Nombre:</label>
<input type="text" name="user_name" />
<label for="mail">Correo electrónico:</label>
<input type="email" name="user_mail" />
<input class="button" type="button" value="Inicio"></input>
</body>
</html>
CSS
Ahora aplicamos first-of-type al elemento <label>, de esta forma el primer <label> tendrá un color más llamativo y un tamaño de letra más grande.
label:first-of-type {
color: #38c8ff;
}
Los otros elementos <label> tendrán el siguiente estilo.
label {
color: #b7b9b9;
font-size: larger;
}
Bueno si quieren el ejemplo completo lo dejo aquí en github
Si encuentras algún error por favor déjalo en los comentarios.😅
