child selector

bit bitcode css

El child selector o selector de hijo permite dar estilos a los hijos directos del primer selector que se defina. Es decir, que no va más profundo al selector definido.

Se coloca entre dos selectores y se define con el símbolo "mayor que" (>).

.container > .child {
  background-color: yellow;
  color: black;
}

child selector vs. descendant selector

A diferencia del descendant selector (selector descendiente), el selector de hijo es más estricto respecto a los elementos que van a coincidir, puesto que este no coincide con todos los elementos que hay dentro.

Nota

El descendant selector o selector descendiente es el típico selector de CSS que se suele usar, representado por un espacio (.container .child { ... }).

Para explicar mejor la principal diferencia, veamos el siguiente ejemplo:

<div class="container">
	<span>Element 01</span>
 	<span>Element 02</span>
	<div>
    	<span>Element 03</span>
    	<span>Element 04</span>
  	</div>
  <span>Element 05</span>
  <span>Element 06</span>
</div>
/* descendant selector */
.container span {
	background-color: blue;
	color: white;
}

/* child selector */
.container > span {
	background-color: yellow;
	color: black;
}

Nota como el descendant selector va por todos los elementos <span>, mientras que el child selector solo va por los hijos directos y no profundiza en otros elementos.

Recursos