53 - Pseudo-clases: nth-child y nth-last-child




Problema:

Confeccionar una página que muestre dos listas ordenadas.
En la primera mostrar los elementos pares subrayados y los impares tachados. En la segunda activar color verde para la fuente de los items múltiplos de cuatro.

 
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <ol id="lista1">
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
    <li>cuatro</li>
    <li>cinco</li>
    <li>seis</li>
  </ol>
  <ol id="lista2">
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
    <li>cuatro</li>
    <li>cinco</li>
    <li>seis</li>
    <li>siete</li>
    <li>ocho</li>
  </ol>
</body>
</html>
#lista1 li:nth-child(even) {
  text-decoration:underline;
}

#lista1 li:nth-child(odd) {
  text-decoration:line-through;
}

#lista2 li:nth-child(4n) {
  color:#0f0;
}
Ver solución


Retornar