Manual de combinadores CSS

Combinadores de CSS

Un combinador es un símbolo utilizado para explicar la relación entre selectores.

La siguiente tabla muestra los diferentes combinadores en CSS:

Nombre Símbolo Ejemplo Descripción del ejemplo
Combinador de hijos > div > p Elegir todos los elementos <p> que son subelementos directos del elemento <div>.
Combinador de descendientes （espacio en blanco individual） div p Elegir todos los elementos <p> que están dentro del elemento <div>.
Separador de espacio de nombres | ns | h2 Elegir todos los elementos <h2> en el espacio de nombres ns.
Combinador de hermanos adyacentes + div + p Elegir el primer <p> elemento que sigue inmediatamente después del elemento <div>.
Lista de selectores , div, p Seleccionar todos los elementos <div> y todos los elementos <p>.
Combinador de hermanos posteriores ~ p ~ ul Seleccionar todos los elementos <ul> que tengan un elemento <p> anterior.