Un combinador es algo que explica la relación entre los selectores.
Combinadores
Un selector CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un combinador.
Hay cuatro combinadores diferentes en CSS:
selector descendiente
(space)selector hijo
(>)selector adyacente
(+)selector general
(~)
Selector descendiente
El selector descendiente coincide con todos los elementos que son descendientes de un elemento especificado.
El siguiente ejemplo selecciona todos los elementos <p> dentro de los elementos <div>:
Ejemplo:
Selector hijo (>)
El selector > selecciona todos los elementos que son los hijos de un elemento específico.
El siguiente ejemplo selecciona todos los elementos <p> que son hijos de un elemento <div>:
Ejemplo:
Selector adyacente (+)
El selector adyacente se usa para seleccionar un elemento que está directamente después de otro elemento específico.
Los elementos hermanos deben tener el mismo elemento principal, y "adyacente" significa "inmediatamente después".
El siguiente ejemplo selecciona el primer elemento <p> que se coloca inmediatamente después de los elementos <div>:
Ejemplo:
Selector general (~)
El selector general ~ selecciona todos los elementos que son hermanos siguientes de un elemento específico.
El siguiente ejemplo selecciona todos los elementos <p> que son los siguientes hermanos de los elementos <div>:
Ejemplo:
Todos los selectores
| Selector | Ejemplo | Descripción de ejemplo |
element element | div p | Selecciona todos los elementos dentro de los elementos . |
element>element | div > p | Selecciona todos los elementos donde el padre es un elemento . |
element+element | div + p | Selecciona el primer elemento que se coloca inmediatamente después de los elementos . |
element1~element2 | p ~ ul | Selecciona todos los elementos que están precedidos por un elemento . |
Resumen
Los combinadores CSS explican la relación entre los selectores y hay cuatro tipos diferentes: descendiente, hijo, adyacente y general. Cada uno tiene una sintaxis diferente y se utilizan para seleccionar elementos específicos en función de su relación con otros elementos. La tabla de contenidos proporciona ejemplos y una descripción de cada selector.
Traducido con 💚 desde W3Schools.com