Selector contextual en CSS

El selector contextual, representado por el comando espacio (' '), permite seleccionar etiquetas anidadas dentro de un elemento padre especificado

Sintaxis

cssselector1 selector2 {
  
}

Ejemplo

Apliquemos estilos a todas las etiquetas p dentro de las etiquetas div y cambiemos su color a rojo:

html<div>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

cssdiv p {
  color: red;
}

Результат:

Ejemplo

Apliquemos estilos a todas las etiquetas p dentro del elemento con #elem y cambiemos su color a rojo:

html<div id="elem">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

css#elem p {
  color: red;
}

Результат:

Ejemplo

Apliquemos estilos a todas las etiquetas p dentro de elementos con clase .block y cambiemos su color a rojo:

html<div class="block">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

css.block p {
  color: red;
}

Результат:

Ejemplo

Apliquemos estilos a todas las etiquetas b dentro de las etiquetas p, que estén dentro de las etiquetas div y cambiemos su color a rojo:

html<div>
  <p>
    text <b>+</b>
  </p>
</div>

cssdiv p b {
  color: red;
}

Результат:

Véase también