CSS Diner

Acerca de CSS Diner

CSS Diner presenta acertijos de navegador en los que los selectores CSS apuntan a objetos sobre una mesa. Lee el HTML que aparece junto al nivel, escribe un selector y observa con qué elementos coincide. El resultado visual inmediato ayuda a distinguir relaciones entre elementos hermanos y descendientes y a reconocer el uso de las clases mientras aprendes la sintaxis.

Sirve a quienes ya reconocen los elementos HTML y quieren practicar cómo seleccionarlos. Los niveles se centran en selectores. Después de unos cuantos, reproduce un ejemplo en una hoja de estilos real para comprobar si puedes aplicar la misma idea fuera del juego.