Juego de selectores CSS: aprende con CSS Diner
Un selector CSS es la forma de decirle al navegador «a estos elementos, aplícales este estilo». Es como señalar en un puesto del mercado: «la manzana pequeña de la segunda cesta». Si señalas mal, te ponen otra; si el selector es malo, el estilo cae donde no toca.
Qué es y quién lo hizo
CSS Diner lo publica en GitHub el usuario flukeout, con licencia de código abierto MPL-2.0. El último cambio en su repositorio es de septiembre de 2023: no recibe novedades, pero los selectores que enseña siguen vigentes. La dirección cssdiner.com lleva al mismo juego. No pide registro y guarda tu progreso en el navegador.
Cómo se juega
- Mira la mesa: los elementos que debes seleccionar se mueven.
- A la derecha ves el HTML de la mesa, con etiquetas inventadas como
<plate>,<bento>,<apple>o<pickle>. - Escribe el selector en el editor y pulsa Enter.
- Si aciertas, pasas de nivel. Con el menú de niveles puedes saltar a cualquiera y ver cuáles has completado.
Cada nivel trae una ficha a la derecha con el nombre del selector, su sintaxis y ejemplos. Si te atascas, léela antes de buscar la respuesta.
Qué selectores aprendes
| Tipo | Ejemplo del juego | Qué elige |
|---|---|---|
| Etiqueta, id y clase | plate, #fancy, .small |
Por nombre de elemento, por id o por clase |
| Descendiente | plate apple |
Manzanas dentro de un plato, a cualquier profundidad |
| Hijo directo | plate > apple |
Manzanas que están justo dentro de un plato |
| Hermanos | plate + apple, bento ~ pickle |
El siguiente elemento, o todos los que vienen después |
| Grupo y universal | plate, bento, * |
Varios selectores a la vez, o todo |
| Pseudoclases de posición | :first-child, :nth-child(3), :only-of-type |
Según el lugar que ocupan |
| Negación y vacío | apple:not(.small), bento:empty |
Lo que no cumple algo, o lo que no tiene hijos |
| Atributos | [for], [for^="Sa"], [for$="ato"] |
Según un atributo o cómo empieza o acaba su valor |
Así se ven algunos en una hoja de estilos real:
/* Manzanas que son hijas directas de un plato */
plate > apple { outline: 2px solid green; }
/* Todas las manzanas menos las pequeñas */
apple:not(.small) { transform: scale(1.1); }
/* Platos cuyo atributo for empieza por "Sa" */
plate[for^="Sa"] { border-color: gold; }Cómo sacarle partido
- Juega los niveles en orden la primera vez: cada uno usa lo del anterior.
- Cuando aciertes, pregúntate si hay otro selector que también valga y pruébalo.
- Al terminar, abre las herramientas de desarrollo del navegador en cualquier web y prueba selectores en la consola con
document.querySelectorAll('…'). Es el mismo juego con HTML real. - Vuelve en unos días a los niveles 18 a 24 (
:nth-child,:nth-of-typey compañía), que son los que más se olvidan.
Para quién es y lo que conviene saber
Es útil para quien empieza con CSS y para quien escribe CSS a diario pero siempre duda entre :nth-child y :nth-of-type. Si ya dominas los selectores, lo terminas en un rato y aprendes poco.
- Solo en inglés. Las explicaciones son cortas y con ejemplos, así que se siguen con un inglés básico.
- No incluye los selectores más recientes, como
:is(),:where()o:has(), que hoy funcionan en todos los navegadores principales. Para esos, la guía de selectores de MDN. - Enseña a elegir elementos, no a escribir buen CSS. En tus proyectos, prefiere selectores cortos y basados en clases.
Alternativas
- Selectores CSS en MDN, en español: la referencia completa, incluidos los selectores que el juego no trae.
- El juego de las ranas para Flexbox, Flexbox Froggy, si te gusta aprender CSS jugando. Está en español.
Fuentes
Comprobado el 7 de noviembre de 2026:
- CSS Diner y su código en GitHub: licencia MPL-2.0, fecha del último cambio (19 de septiembre de 2023), los 32 niveles y sus selectores (
js/levels.js), progreso guardado enlocalStorage(js/restaurant.js) y redirección decssdiner.com(README y comprobado concurl). - Selectores CSS en MDN.
Los selectores del ejemplo se han probado con querySelectorAll sobre una mesa como la del juego en Google Chrome 157 (modo headless).