Publicidad

 

first-child css, first-child ejemplo, first-child example, first-child css example, first-child tutorial, css fácil, css ejemplos cortos

¿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 :

Publicidad

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.😅

Publicidad


Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments