Selector hijo en CSS

El selector hijo > permite seleccionar elementos por anidamiento directo entre ellos.

Sintaxis

cssselector1 > selector2 {
  
}

Ejemplo

Apliquemos a todas las etiquetas b que se encuentren directamente dentro de las etiquetas p y coloreémoslas en rojo:

html<p>
  texto <b>+</b>
</p>
<p>
  texto <i><b>-</b></i>
</p>

cssp > b {
  color: red;
}

Результат:

Ejemplo

Apliquemos a todas las etiquetas b que se encuentren directamente dentro de elementos con la clase .block y coloreémoslas en rojo:

html<p class="block">
  texto <b>+</b>
</p>
<p class="block">
  texto <i><b>-</b></i>
</p>
<p>
  texto <b>-</b>
</p>

css.block > b {
  color: red;
}

Результат:

Ejemplo

Apliquemos a todos los elementos con la clase .elem que se encuentren directamente dentro de elementos con la clase .block y coloreémoslos en rojo:

html<p class="block">
  texto <span class="elem">+</span>
</p>
<p class="block">
  texto <i><span class="elem">-</span></i>
</p>
<p class="block">
  texto <span>-</span>
</p>
<p>
  texto <span class="elem">-</span>
</p>

css.block > .elem {
  color: red;
}

Результат:

Véase también