¿Cómo seleccionar el primer elemento hijo?
Definición:
first-child: Es una pseudo-clase que selecciona solo el primer elemento hijo de un grupo de elementos.
(Para todos los que no quieran leer les dejo un vídeo corto de first-child.😜)
Sintaxis:
Para usar esta pseudo-clase primero va el elemento seguido de 2 puntos y luego first-child.
elemeneto:first-child {
/* los atributo a modificar */
}Ejemplo :
En una barra de navegación colocar un border-top al primer <li> del elemento <ul>
HTML
Para este ejemplo primero creamos la estructura base del html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Ejemplo first-child CSS </title>
</head>
<body>
<nav class="menu">
<ul>
<li><a href="url">Inicio</a></li>
<li><a href="url">Sobre nosotros</a></li>
<li><a href="url">Contacto</a></li>
</ul>
</nav>
</body>
</html>
CSS
Aquí es cuando aplicamos el first-child al primer elemento <li> que esta dentro del <ul>
ul li:first-child {
border-top: 1px solid #aff;
}
De forma general todos elementos <li> tienen un border-bottom.
li {
text-decoration: none;
border-bottom: 1px solid #aff;
}
Aquí en github les dejo el archivo con el ejemplo creado.
Si encuentras algún error por favor déjalo en los comentarios.😅
