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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Escritorio
Móvil

Característica	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Soporte básico	(Yes)	(Yes)	(Yes)	7.0	(Yes)	(Yes)

Característica	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Soporte básico	?	(Yes)	?	?	?	?