Combinadores en CSS

En el uso de CSS podemos ir desde lo más básico hasta conceptos muy avanzados tales como selección de elementos por conteo, por atributos, por estado, entre otros. En este artículo tocaremos el tema de los selectores llamados Combinadores, un tipo especial de selectores en CSS que se usan en conjunto con selectores simples (clase, id, elemento) para hacer que una regla sea más específica.

Hay cuatro tipos de Combinadores en CSS3:

• Selector Descendente (espacio)
• Selector de hijo directo (>)
• Selector de elemento adyacente (+)
• Selector basado en elemento precedente con el mismo padre(~)

Selector Descendente

Este selector afecta a todos los elementos que sean descendientes de otro elemento especificado, sin importar el nivel de profundidad al que se encuentren. Por ejemplo la siguiente regla afectaría a todos los elementos <p> dentro de el elemento <div> con la clase “contenido” y se indica poniendo un espacio entre un selector y el otro:

HTML

CSS

Selector de hijo directo

Este selector actúa sobre todos aquellos elementos que sean hijos de otro elemento especificado, pero que se encuentren en el primer nivel, es decir, si están dentro de otro elemento hijo de ese mismo padre, no serán tomados en cuenta. Si usamos como ejemplo el mismo HTML de arriba:

y la regla CSS con el símbolo > entre ambos selectores:

Ésta solo aplicará para el elemento <p> con el texto “Párrafo 1″ que es hijo del <div> y que no está dentro de ningún otro elemento hijo del mismo <div>, es decir que se encuentra en el primer nivel de anidación de elementos dentro de otro elemento padre.

Selector de elemento adyacente

Este selector afecta a los elementos que, teniendo el mismo elemento como padre, estén inmediatamente seguidos uno de otro, esta relación se representa con el símbolo + entre los selectores. Con el mismo ejemplo HTML de arriba, la siguiente regla afectaría solo al segundo elemento <p> que contiene el texto “Párrafo 3” por estar inmediatamente después de otro <p> hijo del mismo padre que él.

Selector basado en elemento precedente con el mismo padre

Este selector actúa sobre aquellos elementos que se encuentren precedidos por un elemento específico y que tengan como padre al mismo elemento, y se representa con el símbolo ~ entre los dos selectores. Si usamos el siguiente HTML de ejemplo:

El selector siguiente estaría afectando solo al div con la clase “anuncios” ya que coincide con el patrón de encontrarse un elemento “p” antes que él y que ambos, el elemnto div y el p comparten a div.contenido como padre.

La principal utilidad de este tipo de selectores, radica en hacer uso de ellos cuando no tenemos otros atributos como clases o ids que hagan posible identificar al elemento o elementos que deseamos estilizar directamente, o en casos en los que no nos es posible manipular de ninguna forma el HTML para insertar atributos de identificación en los elementos con los que queremos trabajar.

Zaira Vega trabaja como Team Leader del equipo Front End en Sngular, le apasiona la enseñanza, las buenas prácticas en el código y sobre todo el mejoramiento constante a través del feedback y el trabajo en equipo. Coffee Lover. Spartan Race Athlete. Geek. Ninja Coder