Comedor CSS (traducido de «CSS diner» por )

¡No te preocupes, esto lo tienes controlado!

¡En lo que sigue aprenderás sobre los selectores CSS! Los selectores se usan para identificar los elementos a los que hay que aplicar estilo.

Ejemplo 1 - Una regla CSS

p {
   margin-bottom: 12px;
}

Aquí, "p" es el selector (selecciona todos los elementos <p>) y se aplica estilo al margin-bottom.

Para jugar, introduce un selector CSS en el editor de abajo que permita la selección de los elementos correctos en la mesa. Si lo haces bien, avanzas al siguiente nivel.

Para ver el marcado HTML de los elementos en la mesa, pasa el ratón sobre ellos.

Tienes una pequeña ayuda sobre los selectores en el panel de la derecha →

Ok, ¡Entendido!
Ayuda, ¡estoy atascado!
style.css
Editor de CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+
enter
{
/* Los estilos irían aquí. */
}

/*
Introduce un número para saltar a un nivel.
Ej → "5" para nivel 5 level 5
*/
table.html
Visor de HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Made by @flukeout — come say hi!

Para sugerencias y preguntas puedes acudir a the Github repo.

Ejemplos

Choose a level

Reinicia el progreso