Selectores de hijo

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

css
span {
  background-color: white;
}
div > span {
  background-color: DodgerBlue;
}
html
Span #1, dentro del div. Span #2, dentro del span que está en el div.
Span #3, no está dentro del div.

Especificaciones

Specification
Selectors Level 4
# child-combinators

Compatibilidad con navegadores