Selectores CSS avanzados

A la hora de crear un sitio web o trabajar sobre uno ya existente, es muy habitual tener que emplear selectores CSS avanzados para apuntar a elementos HTML muy concretos. Es por ello que en este artículo te enseño a emplear selectores CSS complejos, que te ayudarán a implementar reglas de estilo totalmente adaptadas a tus necesidades.

Esta entrada es una continuación del artículo Qué son los selectores CSS y qué tipos existen, donde te explico los conceptos básicos sobre los selectores. Si todavía no tienes muy claro qué son estos elementos y cuáles son los selectores elementales, te recomiendo leerlo antes de seguir con este artículo.

Si ya tienes esos conocimientos, empecemos.

Selector de hijos

Imaginemos que tenemos un conjuntos de elementos div a los que hemos asignado la clase «miTexto», los cuales contienen siempre un párrafo al que queremos dar estilo. La forma más sencilla de aplicar un determinado estilo a todos los párrafos que sean hijos de los div mencionados es la siguiente:

<!--Código HTML-->
<div class="miTexto">
       <p>Mi párrafo</p>
</div>
<div class="miTexto">
       <p>Mi párrafo</p>
</div>
<div class="miTexto">
       <p>Mi párrafo</p>
</div>

//Código CSS
    .miTexto p {
        font-size:1rem;
    }

Es decir, para crear un selector de hijos únicamente tienes que poner los elementos HTML a los que quieres apuntar en orden de padres a hijos. En el ejemplo anterior hemos definido únicamente dos elementos HTML en el selector, aquellos que tienen la clase «miTexto» y las etiquetas de párrafo. Sin embargo, podemos crear selectores más complejos añadiendo elementos más HTML.

Por ejemplo, imagina que en tu documento HTML hay etiquetas de enlace dentro de los div (hermanos de las etiquetas <p>) y dentro de los párrafos (hijos de las etiquetas <p>). Puede que necesites dar estilo a los enlaces que se encuentran dentro de los párrafos que a su vez se encuentran dentro de los div con clase «miTexto». Para ello, tendrás que crear un selector que contenga los elementos padres e hijos que sean necesarios:

<!--Código HTML-->
<div class="miTexto">
       <a href="#">Enlace 1</a>
       <p>Mi párrafo <a href="#">Enlace 2</a></p>
</div>
<div class="miTexto">
       <a href="#">Enlace 1</a>
       <p>Mi párrafo <a href="#">Enlace 2</a></p>
</div>
<div class="miTexto">
       <a href="#">Enlace 1</a>
       <p>Mi párrafo <a href="#">Enlace 2</a></p>
</div>

//Código CSS
    .miTexto p a {
        color:red;
    }

Siguiendo con el ejemplo anterior, los enlaces con texto «Enlace 1» sería hijos directos de los div con clase «miTexto», pero los enlaces con texto «Enlace 2» no lo serían, ya que su padre directo es el párrafo. Imagina que, al contrario que en el ejemplo anterior, quieres dar estilo únicamente a los enlaces que tienen como texto «Enlace 1». En ese caso, el código necesario es el siguiente:

<!--Código HTML-->
<div class="miTexto">
       <a href="#">Enlace 1</a>
       <p>Mi párrafo <a href="#">Enlace 2</a></p>
</div>
<div class="miTexto">
       <a href="#">Enlace 1</a>
       <p>Mi párrafo <a href="#">Enlace 2</a></p>
</div>
<div class="miTexto">
       <a href="#">Enlace 1</a>
       <p>Mi párrafo <a href="#">Enlace 2</a></p>
</div>

//Código CSS
    .miTexto > a {
        color:green;
    }

Este tipo de selectores pueden parecer confusos al principio, pero te recomiendo utilizar los códigos anteriores para experimentar con este tipo de selectores. ¡Con un poco de práctica los tendrás dominados!

Selectores CSS avanzados: selector de hermanos

Estos selectores se utilizan cuando queremos apuntar a elementos que se encuentran al mismo nivel, es decir, aquellos que tienen el mismo padre directo. Sin embargo, en este caso se aplican únicamente a los elementos hermanos que se encuentren inmediatamente después unos de otros, sin otro tipo de elementos HTML de por medio.

Siguiendo con el ejemplo anterior, imaginemos que añadimos un encabezado h2 únicamente a uno de nuestros elementos <div>. Para darle estilo únicamente a los enlaces adyacentes (hermanos) a los encabezados h2, se puede emplear el siguiente código:

<!--Código HTML-->
<div class="miTexto">
       <a href="#">Enlace 1</a>
       <p>Mi párrafo <a href="#">Enlace 2</a></p>
</div>
<div class="miTexto">
       <h2>Mi encabezado</h2>
       <a href="#">Enlace 1</a>
       <p>Mi párrafo <a href="#">Enlace 2</a></p>
</div>
<div class="miTexto">
       <a href="#">Enlace 1</a>
       <p>Mi párrafo <a href="#">Enlace 2</a></p>
</div>

//Código CSS
    h2 + a {
        color:gray;
    }

Selectores de atributos

Para finalizar con los selectores CSS avanzados, te presento los selectores de atributos. Gracias a ellos podrás apuntar a los elementos HTML que contengan un determinado atributo. Te presento los tres tipos más importantes:

/*Selector para apuntar a todos los enlaces que tienen el atributo title*/a [title] {
     color:blue;
}

/*Selector para apuntar a todos los enlaces que tienen el atributo title con valor 'miEnlace'*/a [title="miEnlace"] {
     color:blue;
}

Existen más tipos de selectores de atributo y algunas variaciones de los que te he mostrado, pero son muy poco habituales. Si te interesa conocerlos, te recomiendo que visites la siguiente página.

Selectores CSS avanzados: conclusiones

Este tipo de selectores te servirán para crear reglas CSS para todo tipo de situaciones y necesidades. Te recomiendo que practiques y que los intentes combinar, ya que las posibilidades son casi infinitas.

Espero que este artículo te haya sido útil y que te sirva de ayuda para crear o mejorar sitios web. Si quieres descubrir más artículos relacionados, te recomiendo que visites la sección de programación web de nuestro blog, donde podrás encontrar un montón de entradas sobre esta temática.

Te espero en el siguiente artículo.

¡Hasta la próxima!