Como funcionan los Combinadores CSS

En CSS existen utilidades para trabajar de manera más práctica en el desarrollo Frontend, entre estas utilidades se encuentran los Combinadores CSS que nos ayudan a crear una selección especial de los elementos que se encuentran en la vista HTML, por medio de una selección especial lograras ser más práctico en CSS, vayamos con el articulo.

Los Combinadores CSS especifican la relación entre los selectores, un selector CSS puede tener muchos selectores simples, es entre estos selectores simples en donde podemos incluir un Combinador CSS.

Existen 4 Combinadores en CSS, los mencionaremos y describiremos su funcionamiento a continuación

Selector Descendente

Este selector coincide con todos los elementos que son descendientes de un elemento especifico, por ejemplo a continuación seleccionamos todos los encabezados h1 que se encuentran dentro de una capa o div creando así un combinador CSS de selección de elementos HTML

Selector Hijo (Child)

Selecciona todos los elementos que son hijos inmediatos de un elemento HTML específico, se usa el símbolo > para indicar autoridad del primer elemento al segundo elemento en la selección, por ejemplo en el siguiente ejemplo seleccionamos todos los párrafos p que sen encuentran dentro de una capa o div creando así un combinador CSS de selección de elementos HTML

Selector de Hermanos Adyacentes

Este tipo de selector, selecciona todos los elementos que se encuentran después del selector inicial, por ejemplos en el siguiente ejemplo seleccionamos todos las líneas horizontales que se encuentren después de una capa o div creando así un combinador CSS de selección de elementos HTML

Selector General de Hermanos

Con este tipo de selector se selecciona todos los elementos que son hermanos de un elemento específico, por ejemplo a continuación seleccionamos todos las listas ordenadas ol que sean hermanos de una capa o div creando así un combinador CSS de selección de elementos HTML

Puedes probar las combinaciones CSS, en tus proyectos para que tengas una idea más clara de lo que trata.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.