Selectores CSS avanzados

Publicado el 6 agosto, 2021 por Caronte Studio.  / Sin comentarios

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

Como bien sabrás, las etiquetas HTML tienen una estructura jerárquica, donde unos elementos se anidan dentro de otros. Es por ello que a los elementos HTML que se encuentran dentro de otro se los denomina «hijos» de dicho elemento, al cual se le llama elemento «padre».

Al trabajar con hojas de estilo CSS, en muchas ocasiones te interesará crear reglas que apunten a los hijos de un determinado elemento. Existen diferentes maneras de llevar a cabo esta acción, veámoslo con un ejemplo.

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;
    }

De esta manera, estarás apuntando únicamente a los enlaces que se encuentren dentro de los párrafos (hijos), no a los que se encuentran a la misma altura que éstos (hermanos).

Por último, conviene que sepas que existe un operador que permite definir selectores de hijo todavía más específicos, es el símbolo >. Este operador se pone entre el elemento padre y el elemento hijo, indicando que la propiedad CSS únicamente se aplicará sobre los hijos directos del padre.

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:

• elemento_html [ nombre_atributo ]: apunta a todos los elementos HTML indicados que contengan el atributo especificado. Por ejemplo:

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

• elemento_html [ nombre_atributo=valor ]: apunta a todos los elementos HTML indicados que contengan el atributo especificado con un valor igual al establecido. Por ejemplo:

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

• elemento_html [ nombre_atributo~=valor ]: este selector se usa cuando el atributo puede tener valores múltiples. Tiene la misma funcionalidad que el anterior, pero en este caso apunta a aquellos elementos cuyo atributo tiene al menos un valor igual al establecido.

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!