Selectores de hijo

El combinador > separa a dos selectores y busca solo a los elementos que coindicen con el segundo selector y que son hijos directos del primero. EN contraste, cuando se combinan dos selectores con el selector de descendiente, la expresión busca elementos que coinciden con el segundo selector y que tienen algun ancestro que coindice con el primero, sin importar el nivel de separación que tengan dentro del DOM.

Sintaxis

selector1 > selector2 { style properties }

Ejemplo

span { background-color: white; }
div > span {
  background-color: DodgerBlue;
}

<div>
  <span>Span #1, dentro del div.
    <span>Span #2, dentro del span que está en el div.</span>
  </span>
</div>
<span>Span #3, no está dentro del div.</span>

Especificaciones

Especificación	Estatus	Comentarios
Selectors Level 4 La definición de 'child combinator' en esta especificación.	Working Draft
Selectors Level 3 La definición de 'child combinators' en esta especificación.	Recommendation	Sin cambios
CSS Level 2 (Revision 1) La definición de 'child selectors' en esta especificación.	Recommendation	Definición inicial

Compatibilidad de navegadores

BCD tables only load in the browser