Combinadores en CSS

Descendiente, hijo, hermano adyacente y general: cuatro maneras de relacionar elementos.

nav a {
  text-decoration: none;
}

.menu > li {
  list-style: none;
}

h2 + p {
  margin-top: 0;
}

p ~ p {
  margin-top: 0.75rem;
}

Cómo funciona

1. Un espacio significa cualquier descendiente; >, solo un hijo directo.
2. + es el hermano siguiente; ~, cualquier hermano posterior.
3. Los combinadores de hermanos son la manera de espaciar contenido apilado.

Palabras clave y builtins usados aquí

• rem

El intento, en números

Líneas

15

Caracteres a escribir

125

Tokens

37

Ritmo de tres estrellas

70 tpm

Al ritmo de tres estrellas de 70 tokens por minuto, este intento toma unos 32 segundos.

Escribe este fragmento

Paso 3 de 6 en Selectores; paso 3 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →