39-Combinadores de selectores en css

combinador es algo que expplica la relacion entre selectores

Un selector puede contener mas de uno selector simple.

Para combinar selectores simples se usa los combidores, que en CSS hay 4 tipos diferentes

• selector de descendientes (espacio)
• selector de niños (>)
• selector de hermano adyacente (+)
• selector general de hermanos (~)

...

Selector de descendientes

Los selectores descendientes son todos los selectores que se encuentram dentro de otros selectores

Nel ejemplo seguinte vemos que el selector p es descendiente en relacion al div

        div p {
              background-color: yellow;
            }
    

Selector de niños (>)

El selector de ninos seleciona todos los ninos del selector selecionado

Nel ejemplo vemos como el selector p es nino del div

        div > p {
              background-color: green;
            }
    

Selector de hermanos adyacentes (+)

El selector hermano adyacente se utiliza 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 "siguiendo inmediatamente".

El siguiente ejemplo selecciona el primer elemento p que se coloca inmediatamente después de los elementos div

            div + p {
                background-color: green;
              }
        

Selector general de hermanos (~)

El selector de hermanos 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

        div ~ p {
            background-color: red;
          }
    

Ir al indice