Aportando a lo que @Rafael comentó. El carácter mayor que (>) es un combinador de selectores.
Un
combinador no es más que un carácter específico que une (o combina, por eso el nombre) dos o más selectores.
Según tengo entendido existen 4 tipos de combinadores:
- Descendientes (su carácter es un espacio en blanco " ").
- Hijos (su carácter es un mayor que ">", este es el que preguntaste).
- Hermanos adyacentes ( su carácter es un símbolo de suma "+").
- Hermanos en general ( su carácter es la tilde "~").
Posiblemente los selectores que más uses sean descendientes
" " e hijos
">", por eso sería bueno diferenciarlos y saber su uso. Una breve explicación es que los hijos seleccionan al elemento que esta inmediatamente dentro del elemento padre, mientras que los descendientes seleccionan a cualquier elemento que esté dentro del elemento padre (sin importar si está inmediatamente dentro), por ejemplo:
Combinador hijo:
Aquí se seleccionará el elemento p, que reside dentro de un section, que a su vez está dentro de un main. Solo ese parrafo dentro de todos los que puedan haber en tu sitio web será seleccionado.
Combinador descendiente:
Aquí se seleccionarán todos los elementos p que esten dentro del main, sin importar si estan dentro de otro elemento o no, todos los p en general serán seleccionados.
Una nota importante es que cuando trabajes con combinadores no dejes espacios, ya que como te expliqué, el espacio en blanco es un combinador.
Es muy bueno saber estos detalles, realmente ayudan a la hora de codificar, espero haber aportado un granito de arena.