Ejercicio: Selectores y especificidad

⏱ 30 minutos
📶 Nivel: principiante

Objetivo

Estilizar un menú, una lista y un formulario usando combinadores, selectores de atributo, pseudoclases y pseudoelementos, sin añadir una sola clase nueva al HTML.

La página de partida

Este es el HTML de tu página. No lo modifiques: escribe solo el CSS.

pagina.html

<nav class="menu">
  <a href="#" class="activo">Inicio</a>
  <a href="#">Cursos</a>
  <a href="https://ejemplo.com" class="externo">Blog</a>
</nav>
<ul class="lista">
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
  <li>Cuatro</li>
</ul>
<form class="form">
  <input type="text" id="nombre" required>
  <input type="email" id="correo">
  <button type="submit">Enviar</button>
</form>

✏️ Prueba tu CSS aquí (opcional)

Código (edítalo)

<style>
  /* escribe tu CSS */
</style>
<nav class="menu">
  <a href="#" class="activo">Inicio</a>
  <a href="#">Cursos</a>
  <a href="https://ejemplo.com" class="externo">Blog</a>
</nav>
<ul class="lista">
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
  <li>Cuatro</li>
</ul>
<form class="form">
  <input type="text" id="nombre" required>
  <input type="email" id="correo">
  <button type="submit">Enviar</button>
</form>

Resultado

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Convierte .menu en una fila de enlaces: a con display: inline-block, padding: 8px 14px y text-decoration: none.
Haz que el enlace con la clase .activo tenga fondo #4f46e5 y color #ffffff.
Con un selector de atributo, haz que los enlaces que empiezan por https tengan font-style: italic.
Haz que los elementos pares de .lista (li) tengan fondo #eef2ff.
Haz que el primer li tenga font-weight: 700.
Con :not(:last-child), da un borde inferior 1px solid #cccccc a todos los li menos al último.
Haz que el campo :required tenga un borde izquierdo de 4px solid #e11d48.
Con ::after, añade el texto " ↗" a los enlaces externos (sin añadir clases al HTML).

💡 Pista 1: ¿cómo selecciono solo los hijos pares?

Con :nth-child(even). Si lo escribes como .lista li:nth-child(even), solo afectará a los li de esa lista.

💡 Pista 2: no veo el `::after`

Recuerda content: " ↗";. Sin content, el pseudoelemento no se genera. Y escribe el selector como a[href^="https"]::after.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código CSS

✅ Ver una solución de ejemplo

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

estilos.css

.menu a {
  display: inline-block;
  padding: 8px 14px;
  text-decoration: none;
}
.menu a.activo { background: #4f46e5; color: #ffffff; }

a[href^="https"] { font-style: italic; }
a[href^="https"]::after { content: " ↗"; }

.lista li:nth-child(even) { background: #eef2ff; }
.lista li:first-child { font-weight: 700; }
.lista li:not(:last-child) { border-bottom: 1px solid #cccccc; }

input:required { border-left: 4px solid #e11d48; }

💡 🏁 Reto extra (opcional)

Calcula la especificidad de cada selector de tu solución. ¿Puedes reescribir alguno para que tenga especificidad más baja sin cambiar el resultado?