CSS Diner (ver versión original en inglés (con menos ejercicios))

¡No te preocupes, ya lo tienes!

¡Estás a punto de aprender los selectores CSS! Los selectores le permiten elegir a qué elemento aplicar estilos.

Anexo 1: una regla CSS

p {
   margin-bottom: 12px;
}

Aquí, la "p" es el selector (selecciona todos los elementos <p>) y aplica el estilo de margen inferior.

Para jugar, escribe un selector de CSS en el editor siguiente para seleccionar los elementos correctos en la mesa. Si lo haces bien, avanzarás al siguiente nivel.

Pase el cursor sobre los elementos de la tabla para ver su formato HTML.

¡Obtenga ayuda con los selectores de la derecha! →

¡Bien, ya lo tengo!
¡Ayuda, estoy atascado!
style.css
CSS Editor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+
enter
{
/* Aquí irían tus estilos, ahora no es necesario rellenar nada */
}

/*
Escribe el número para saltar de nivel.
Ex → "5" para nivel 5
*/
table.html
HTML Viewer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Basado en el desarrollo de @flukeout Código original the Github repo.

Ejemplos

Cambia de nivel

Volver a empezar