Blog de MGPanel

Novedades, tutoriales y recursos para ayudarte a aprovechar MGPanel al máximo.

¿Qué son los selectores hijos en CSS?

Si estás leyendo esto, puede que ya encuentres familiarizado con CSS. Comenzamos recordando que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector CSS se puede definir como el código que identifica a uno o varios elementos HTML para aplicarle estilos.

En este post te hablaremos específicamente sobre los selectores hijos en CSS, cómo podrás usarlos para diseñar tu página web y a qué categoría exacta pertenecen. Sin embargo, antes de entrar en el tema, es importante que sepas que los selectores hijos en CSS forman parte de la categoría mayor de “selectores”.

Los selectores hijos en CSS son selectores simples que se utilizan para seleccionar un elemento que es hijo de otro elemento. Si ya sabes algo de CSS, te puede parecer similar al selector descendente. Pero es muy diferente en su funcionamiento, se usa para seleccionar un elemento que es hijo de otro elemento y se indica mediante el "signo de mayor que" (>), independientemente de a qué profundidad se encuentre.

Ejemplo:

<!-- Bloque de código eliminado por incompatibilidad -->

Como pudimos observar en el ejemplo anterior:

El selector p > span se puede leer de la siguiente manera; “todo elemento span que sea hijo directo de un elemento p”. No obstante, el segundo elemento "span" vemos que no cumple con esta regla, porque es descendiente, más no hijo directo de un elemento "p".

El CSS tiene recursos, herramientas y usos infinitos para ayudarte en la creación del diseño de tu web. Si te interesa este mundo del diseño web. Te invitamos a echarle un vistazo a nuestro curso de programación en Mgpanel y formar parte de nuestra comunidad de programadores.