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;
}
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;
}