Anidamiento en CSS

Las reglas hijas viven dentro del padre: así lees el componente en un solo lugar.

.card {
  padding: 1rem;
  border-radius: 0.5rem;

  & h3 {
    margin: 0;
    font-size: 1.125rem;
  }

  &:hover { background: #f8fafc; }

  &.is-selected { outline: 2px solid #2b6cb0; }

  @media (width >= 48rem) {
    padding: 1.5rem;
  }
}

Cómo funciona

1. & es el selector padre; es obligatorio cuando la regla anidada empieza con un nombre.
2. La especificidad de un selector anidado es la de toda la cadena, como si estuviera escrita completa.
3. Anida un nivel donde puedas: tres niveles son un selector que nadie encuentra.

Palabras clave y builtins usados aquí

• background
• margin
• media
• outline
• padding
• px
• rem

El intento, en números

Líneas

17

Caracteres a escribir

216

Tokens

65

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 46 segundos.

Escribe este fragmento

Paso 3 de 3 en Selectores que hacen preguntas; paso 10 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →