Uso de selectores CSS

En el mundo del diseño web donde todo gira alrededor de la información y el contenido, todos piensan estar a la vanguardia, o peor aún piensan saber todo sobre un tema y no creen necesario el refinar dicho conocimiento. Debemos aprender a reconocer cuando hay que expandir nuestro conocimiento, aún cuando sean cosas tan simples y sencillas que son consideradas las bases de nuestro trabajo.

Como ya se ha mencionado antes, sin una base sólida todo cae, es por eso que tenemos que echar un vistazo a nuestras costumbres y manera de programar, hacer un auto análisis y darnos cuenta si realmente estamos aprovechando el potencial que nos ofrece la programación web.

Optimicemos nuestro CSS

Veamos un ejemplo básico, la creación y mantenimiento de estilos en un sitio Web. Las hojas de estilo CSS forman una parte fundamental de cualquier sitio web en la actualidad, no podemos pensar en un sitio sin imaginar el código de estilo que lo mantiene, todo mediante etiquetas y sentencias que le dan color, un alineado o una mejor presentación a nuestro contenido.

Sí, quizás desde hace mucho tiempo atrás, como principiante en CSS, aprendiste lo que era un identificador, una clase o un selector de elementos descendientes, quizás eso no representa mayor reto para ti y dominas su uso a diestra y siniestra, pero te has puesto a pensar que existen muchos más tipos de selectores que muy probablemente representen una mejor solución para algunos de tus problemas al momento de maquetar una web.

Si únicamente has basado tu desarrollo en estos tres elementos te estás perdiendo de la enorme flexibilidad que nos ofrece CSS. Es por ello que en este artículo trataremos de desplegar los selectores de más ayuda al momento de desarrollar estilos con CSS.

Selectores básicos CSS

Como ya mencionamos existen selectores básicos en CSS los cuales son el sustento de cada día de un maquetador que esté trabajando en un estilo. Los principales selectores son los llamados identificadores, a los cuales mencionaremos como IDs, y las clases, conocidas como Class en el idioma inglés.

Los IDs se pueden reconocer por tener un símbolo de almohadilla o numeral antes del nombre, que es el signo que se escribe #, por lo que si en una hoja de estilo queremos aplicar una sentencia a un elemento cuya etiqueta luce algo así:

<div id="soyUnDiv"></div>

Tendremos que llamar a un selector como este “#soyUnDiv”. Los identificadores son rígidos y no permiten reusarse, por lo que el estilo que definamos para este selector únicamente será aplicado al elemento que cuenta con ese ID, si queremos aplicar un estilo para dos o más elementos entonces tendremos que usar una Clase.

Una class puede ser identificada por tener el símbolo de punto antes del nombre, por lo que un selector como “.somosDivs” nos traerá a todos los elementos que cuentan con esa clase entre sus atributos. Por ejemplo, supongamos que tenemos un conjunto de capas que comparten la clase mencionada:

<div class="somosDivs" id="div1">Div 1</div>
<div class="somosDivs" id="div2">Div 2</div>
<div class="somosDivs" id="div3">Div 3</div>

El estilo de estas capas puede ser modificado de manera grupal al llamar las clases o de manera individual llamando cada identificador.

Selector por elementos

El uso del nombre del elemento como selector es uno de los ejemplos más básicos en esta cuestión, simplemente con colocar el nombre de un tipo de elemento seguido de alguna sentencia de estilo, nos permite aplicar dicha alteración a todos los elementos que pertenezcan a ese grupo.

En lugar de tener que dar una clase a todos los elementos en el código HTML, o peor aún hacer un selector con todos los IDs de los elementos de interés, debemos mantener simples nuestros selectores y utilizar el nombre del elemento.

Selectores descendientes CSS

Otros selectores CSS muy comunes y sin duda básicos para el desarrollo, son los selectores de tipo descendiente, si bien su uso no puede ser tan constante como es el caso del ID y la clase, son fundamentales al momento de hacer aplicaciones. Su estructura consiste básicamente en colocar un selector enseguida de otro, para aumentar la especificidad.

Su uso se produce cuando necesitamos ser más específicos, por ejemplo si en lugar de querer seleccionar todos los elementos de tipo “link” que existen en el DOM, únicamente quisiéramos los “links” que pertenezcan a una lista entonces usaríamos un selector como este “li a”, ya que con eso indicamos que los elementos “a” tienen que ser descendientes de un elemento “li” para que puedan ser seleccionados.

Selectores CSS con operadores

Podemos utilizar operadores entre elementos para refinar nuestra selección. El uso de operadores como el signo más (+), mayor que (>) y virgulilla (~) nos facilitan las cosas al momento de querer obtener elementos adyacentes o descendientes directos.

El operador más nos va a permitir seleccionar los elementos que se encuentran inmediatamente después del primer elemento del selector. Por ejemplo si tuviéramos un selector como este “ul + p”, seleccionaría únicamente el primer párrafo después de cada lista desordenada de nuestro DOM.

Por su parte el operador mayor que actúa de manera similar a un selector descendiente, con la única diferencia de que selecciona los hijos directos del elemento. Por ejemplo si usamos un selector como este “div#contenedor > ul” en una estructura como esta:

<div id="contenedor">
<ul>
 <li>Hijo
<ul>
 <li>Nieto</li>
</ul>
</li>
 <li>Hijo 2</li>
 <li>Hijo 3</li>
</ul>
</div>

Nos regresará únicamente las listas desordenadas que se encuentran directamente como descendientes del contenedor, en cambio si utilizáramos el selector “div#contenedor ul” nos traería también la lista que actúa como nieto.

El uso del operador virgulilla es más discreto, puesto que su función es bastante similar a la del operador +, sólo que es menos estricto, ya que en lugar de seleccionar únicamente al primer elemento que se encuentra después del indicado, selecciona todos los elementos.

Selectores CSS por atributos

Si contamos con elementos en nuestra página que no tienen ningún ID o Clase asignada tendremos que recurrir a buscarlos en base a otros factores, como pueden ser sus atributos.

Para buscar un elemento basándonos en sus atributos basta con utilizar los corchetes después del nombre del elementos, y dentro de ellos especificar el nombre del atributo que deben de contener.

Por ejemplo un selector como este “div[name]” nos regresará todos los elementos de tipo div que cuentan con un nombre.

También podemos buscar por valores de los atributos, si por ejemplo quisiéramos buscar todos los elementos de tipo div que tienen por nombre “divPrueba” haríamos un selector como este “div[name=’divPrueba’]”.

Selectores CSS de atributos con expresiones regulares

Al escuchar expresiones regulares puede que se nos erice más de un pelo, pero no te preocupes no es nada complicado o fuera de este mundo, las expresiones regulares nos han salvado el pellejo más de una vez y esta no es la excepción.

CSS cuenta con una seria de selectores basados en estas expresiones para aplicarse al momento de buscar valores de atributos.

Entre las expresiones más comunes están “*=”, “^=”, “$=” y “~=”, su uso variará dependiendo del filtrado que queramos aplicar.

Si lo que queremos es buscar una palabra en todo el nombre o valor de un atributo basta con usar el asterisco seguido del signo igual, así obtendremos todos los elementos cuyo atributo tenga la cadena en alguna parte de su valor.

Si tenemos un selector como este “a[href*=’oo’]” nos regresará todos los links que nos lleven a páginas que tengan doble o en sus nombres como es el caso de Google o Yahoo si tuviéramos links hacia esas páginas.

Por otra parte si lo que queremos es nada más los elementos cuyos atributos tengan un valor que empiece con una cadena entonces tenemos que utilizar la expresión “^=”. Si queremos traer todos los links hacia servidores “FTP” de nuestro sitio podemos utilizar una expresión como la siguiente “a[href^=’ftp://’]”.

En cambio si quisiéramos aplicar una búsqueda al final del valor utilizaríamos el símbolo $, por lo que un selector como este “a[href$=’.com.mx’]” nos regresará todos los elementos de tipo link que dirigen hacia páginas mexicanas.

Finalmente “~=” es una expresión no tan popular como las anteriores, pero de gran utilidad si el valor del atributo esta separado por espacios. Supongamos que tenemos un atributo con varios valores separados por espacios:

<a href="https://www.lawebera.es">link</a>

Si queremos rastrear dicho elemento basta con utilizar un selector como este “a[info-adicional~=’nueva’]”.

Selectores CSS de pseudoclases

Existen selectores que son identificados por contener dos puntos en su nombre, a estos se les llama comúnmente selectores de pseudoclases y son utilizados para añadir efectos especiales a un selector.

Su sintaxis es bastante sencilla. Simplemente después del nombre del selector agregamos el símbolo de dos puntos “:” seguido del nombre de la pseudoclase “selector:pseudo-clase {propiedad:valor;}”.

Entre los más populares encontramos al selector “:checked” de gran ayuda al momento de manejar formularios, ya que selecciona todos los elementos de tipo casilla o radiobotón que se encuentran seleccionados.

También encontramos a “:before” y “:after”, dos pseudoclases que cada día son más utilizadas, ya que nos sirven para generar contenido alrededor del elemento seleccionado, ampliando nuestras posibilidades de desarrollo de estilos.

Otras más son utilizadas básicamente en links e imágenes, como es el caso de “:visited”, “:link” y “:hover”.