Selectores de combinador CSS | Explicado

Los combinadores en CSS describen la relación entre ciertos elementos y sobre la base de esta relación, puede diseñar elementos. Esto es útil cuando quieres peinar ciertos elementos a la vez en lugar de diseñar elementos individualmente. Por ejemplo, puede diseñar todos los hermanos generales de un elemento utilizando el selector de combinadores de hermanos generales CSS. Los selectores de combinadores CSS son los siguientes.

1. Selector descendiente
2. Selector de niños
3. Selector de hermanos adyacente
4. Selector de hermanos generales

Todos estos se explican en profundidad aquí.

Selector descendiente

A los fines de seleccionar todos los sucesores de un elemento, se utiliza el selector descendiente. Los sucesores incluyen a todos los hijos de un elemento, que sea un niño directo o un niño múltiples niveles en el árbol doms. Se representa usando un espacio entre el elemento padre e hijo.

Sintaxis

Niño padre
El valor de la propiedad;

Ejemplo

El siguiente ejemplo muestra el funcionamiento del selector descendiente.

Html

Soy un sucesor del div.

También soy un sucesor del div.

No soy un sucesor del div.

En el código HTML anterior, hemos creado un elemento y anidados dos

elementos dentro de ese div. Además de esto, también hemos creado un

elemento fuera del elemento.

CSS

div
relleno: 5px;
borde: 2px negro sólido;

div P
Color de fondo: rosa;

Aquí primero estamos dando algo de relleno y borde al DIV y luego usando el combinador descendiente se da un color de fondo rosa a todos los descendientes

Elementos del Div.

Producción

Los sucesores del elemento se destacan en rosa.

Selector de niños

Como su nombre indica, el combinador infantil selecciona a todos los niños de un elemento. Es diferente del selector descendiente de una manera que selecciona solo a los hijos directos de un elemento. Además, está representado por un signo mayor que (>).

Sintaxis

padre> niño
El valor de la propiedad;

Ejemplo

Vamos a usar un ejemplo similar al anterior para demostrar el funcionamiento del selector de combinadores infantiles.

Html

Este es un niño inmediato.

Este también es un niño inmediato.

Como estoy presente dentro del elemento de sección, por lo tanto, soy descendiente del Div pero no un niño directo.

no soy un niño.

Tampoco soy un niño.

Aquí hemos creado un div y anidado dos

elementos y un elemento dentro del div. La etiqueta nesta aún más

elemento. Además de estos dos más

se generan elementos pero fuera del div.

CSS

div
relleno: 5px;
borde: 2px negro sólido;

div> p
Color de fondo: hotpink;

Estamos usando el combinador infantil para dar un color hotpink al directo

Hijos de Div, además, hemos proporcionado algo de relleno y borde al div.

Producción

El selector de combinadores infantiles funciona correctamente.

Selector de hermanos adyacente

Este selector se utiliza con el fin de diseñar a los hermanos adyacentes. Se representa usando un signo más (+) entre los dos elementos.

Sintaxis

elemento + elemento
El valor de la propiedad;

Ejemplo

Supongamos que quieres diseñar un

elemento que es un hermano adyacente del elemento.

Html

Soy un niño inmediato.

Yo también soy un niño inmediato.

Soy un hermano adyacente.

No soy un hermano adyacente.

Para demostrar el funcionamiento del combinador de hermanos adyacente, creamos algunos

elementos dentro y fuera de un elemento.

CSS

div
relleno: 5px;
borde: 2px negro sólido;

Div + P
color morado;
estilo de fuente: cursiva;
Font-Weight: Bold;

Usando el selector de hermanos adyacente, estamos dando color púrpura, estilo de fuente cursiva y peso de fuente audaz al adyacente

hermano del div.

Producción

El hermano adyacente del elemento div se diseñó utilizando el combinador de hermanos adyacente.

Selector de hermanos generales

Como su nombre indica, este combinador CSS estiliza a todos los hermanos de un elemento que comparten el mismo padre. Representado por un signo de Tilde (~).

Sintaxis

elemento ~ elemento
El valor de la propiedad;

Ejemplo

Vamos a usar el ejemplo utilizado en la sección anterior para ver cómo funciona este combinador.

CSS

div ~ p
color morado;
estilo de fuente: cursiva;
Font-Weight: Bold;

Usando el selector general de hermanos, estamos dando algún estilo a todos los

hermanos del elemento div.

Producción

Todos los hermanos generales del elemento div se diseñaron con éxito.

Conclusión

Un selector de combinador CSS selecciona elementos en el Baiss de su relación con otros elementos. Hay cuatro selectores de combinadores en CSS. A selector descendiente Estiliza a todos los sucesores de un elemento, un selector de niños estilos a los niños directos de un elemento, un hermano adyacente selector estiliza a los hermanos de un elemento que viene justo después de ese elemento, y un selector de hermanos generales estilos a todos los hermanos de un elemento. Esta publicación describe a estos combinadores en detalle junto con ejemplos adecuados.