Listado completo de tutoriales

52 - Pseudo-clases: first-child y last-child


En los próximos conceptos veremos otras formas de seleccionar elementos HTML de una página para aplicarle estilos.

La pseudoclase fist-child nos permite seleccionar el primer elemento hijo de otro elemento padre y de manera similar la pseudoclase last-child selecciona el último elemento hijo.

Problema

Disponer una lista ordenada de 4 elementos, fijar con color verde el primer elemento y color rojo el último elemento de la lista.

pagina.html

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <ol>
    <li>Primer opción.</li>
    <li>Segunda opción.</li>
    <li>Tercer opción.</li>
    <li>Cuarta opción.</li>
  </ol>
</body>
</html>

estilos.css

ol li:first-child {
  color:green;
}

ol li:last-child {
  color:red;
}
first-child last-child

Recordemos que a las pseudoclases se les antecede el caracter : y en forma seguida indicamos el nombre de la pseudoclase previo a los dos puntos indicamos el nombre del elemento a seleccionar:

ol li:first-child {
  color:green;
}

Podemos también expresarlo sin anteceder el elemento ol, es decir sin indicar "selector descendiente":

li:first-child {
  color:green;
}

De forma similar para aplicar un estilo al último item de la lista ordenada utilizamos la pseudoclase last-child:

ol li:last-child {
  color:red;
}

Retornar