Comparador de Especificidad para Selectores CSS

Last updated - May 21, 2019

Compara, prueba y ajusta selectores fácilmente para descubrir cuál tiene mayor especificidad.
Ingresa un selector y la herramienta generará 2 alternativas, activa cualquiera
para identificar visualmente la de mayor especificidad.


Funciona mejor con Google Chrome


Si bien no siempre es el caso, cuántas veces nos hemos encontrado con el problema de invertir más tiempo del necesario al tratar de sobrescribir reglas de estilo CSS que no hemos creado y que no podemos quitar de una página. Un problema común que le sucede a muchos al momento que se quiere personalizar una platilla web que hemos comprado para nuestro blog o cuando se quiere modificar un sitio web de algún cliente.

¿Y qué es lo que hacen la mayoría de los diseñadores web cuando se enfrentan a este problema específico? Pues bueno, observaciónes 100% empíricas (sin atrevernos a mencionar datos científicos) sugieren que algunos de los métodos más populares para resolver este problema son:

1. Usar la palabra clave !important de forma indiscriminada.
2. De plano poner los estilos que se quieren cambiar en el atributo style (casos desesperados).

Ambos métodos están por lo general mal. Es muy probable que los diseñadores con más experiencia intenten resolver este problema ajustando la especificidad de selectores. Si nunca haz escuchado este concepto antes, trataremos de explicarlo brevemente un poco más adelante, pero antes quisieramos explicar un poco un concepto más básico que con frecuencia no es muy bien comprendido.

Qué es un Selector CSS


De acuerdo a la definición de la W3C que es el organismo que desarrolla los estándares de las tecnologías web, un selector es un patrón de reglas de correspondencia para localizar coincidencias de elementos en el arbol del documento (representación interna de una página web) que tiene como finalidad aplicar reglas de estilo. Los selectores pueden ir desde simples nombres de elementos (también conocidos como tags) hasta patrones contextuales mucho más complejos, que pueden ser definidos en términos de valores de atributos (siendo los atributos id y class los más usados para este propósito específico) y mucho más. En resumen, se trata de patrones de texto que se usan para seleccionar los elementos que se desean estilizar en una página web.

Qué es la Especificidad de un Selector CSS


Si se tiene un conjunto de selectores que apuntan al mismo elemento o conjunto de elementos, cómo es que el navegador decide cuál de todos aplicar? Es justamente el problema del que te hablabamos al principio y esto es precísamente donde la Especificidad de los selectores CSS juega su papel. Para un grupo de patrones de correspondencia o selectores dado como explicabamos anteriormente, la especificidad de éstos será lo que al final va a determinar cuáles estilos son los más reelevantes para ser aplicados al elemento. Los navegadores deben calcular la especificidad de los selectores en una página de acuerdo a terminos estrictos, asignando un peso específico a cada declaración de selector, para que así los desarrolladores tengan certeza de que tendrán el mismo comportamiento en los distintos navegadores que hay en el mercado.

Dominar la especificidad no es algo tan sencillo como se podría pensar. Afortunadamente este concepto sólo aplica cuando más de un selector apunta al mismo elemento o conjunto de elementos, lo cual es exáctamente lo que sucede cuando queremos por ejemplo sobrescribir un estilo definido por una librería CSS que usa nuestra página, una situación muy común en el diseño web moderno.

Así que a fin de resolver conflictos de estilos sin tener que modificar nuestro código HTML (si se modifica el atributo style) o usando la palabra clave !important en cada una de las reglas, lo que abre la puerta a tener aún más conflictos en el futuro; vale la pena recordar que una mejor alternativa es utilizar un selector CSS con mayor especificidad que va a sobrescribir los demás de manera organica al usar el propio mecanismo que utiliza el navegador internamente con sus reglas de pesaje.

El Selector es la Clave


Como se ha explicado, para controlar estilos en conflicto, debemos tener un mayor cuidado en el selector que utilicemos para establecer nuestras reglas de estilo, más aún que de las propias reglas. Si definimos cuidadosamente nuestros selectores CSS con la especificidad necesaria, se puede dominar esta bestia con menor esfuerzo. Pero para eso tendrás que probar e investigar diferentes alternativas de selectores para encontrar la que va a funcionar mejor en tu caso particular... Ó puedes hacer un poco de "trampa" y dejar que una herramienta te ayude a generar algunas alternativas de selectores que te ayudarán a resolver este problema más rápido.

El Comparador de Especificidad de Selectores CSS


La idea detrás de esta herramienta vino de nuestro proyecto que actualmente se encuentra en desarrollo. Uno de sus requerimientos es que debe sobre escribir estilos todo el tiempo, a fin de que los usuarios obtengan los resultados esperados. Así que pensamos que podía ser una buena idea compartir una herramienta para generar alternativas de selectores que tengan potencialmente una mayor especificidad para que quienes se enfrentan el problema de sobre escribir estilos cuenten con algo que les permita probar visualmente y buscar una solución y llegar a una que se ajuste bien a sus necesidades. Esperamos que esta herramienta pueda ser útil para este propósito.

Para un selector inicial, el comparador va a generar 2 alternativas comparables que deben apuntar a los mismos elementos que el original. Despues de ingresar y aplicar el selector inicial, podrás visualizar los elementos a los que hace referencia el selector ya que estos resaltarán con un borde punteado en verde; las alternativas se generan en ese mismo momento pero no se aplican.

Tendrás la posibilidad de encender y apagar cualquiera de las alternativas y comparar cuál tiene mejor especificidad observando el color del borde de los elementos que se encuentran resaltados. Si mantienes los tres selectores aplicados, gana la batalla de especificidad aquel cuyo color corresponda al color del borde de los elementos resaltados. Si consideras que alguna de las alternativas puede ser mejorada o simplificada aún más, puedes modificarla manualmente y volverla aplicar con tus cambios para ver si surte el efecto esperado.

Aunque antes de llegar a todo eso primero será necesario indicarle a la herramienta cuál página se va a utilizar para realizar este ejercicio (no funciona para servidores locales o que no están en línea). Si tienes problemas para definir el selector inicial, tenemos otra herramienta que te ayudará con eso. Probablemente te des cuenta que las alternativas generadas tienden a ser bastante extensas, pero aún y cuando los selectores generados no sean precísamente lo que tenías en mente, no olvides que la herramienta te permite ir ajustando y simplificando cualquiera de las opciones y probar al momento para revisar que el selector se ajuste a tus necesidades.


Indica el URL de la página e ingresa el selector del que quieras obtener alternativas.

Activa la primer alternativa para probar un selector basado en clases, si los elementos afectados resaltan con borde azul, eso indica que su especificidad es mayor.

La segunda alternativa te dará un selector más extenso basado en la jerarquía y posición del elemento. 


Para nosotros en Aliadoc la especificidad de selectores CSS es un concepto con el que lidiamos a diario para sobre escribir estilos que cualquier página pueda tener. Estamos desarrollando una app SaaS que te permitirá acutalizar visualmente el diseño de cualquier sitio web fácilmente y muchas otras funcionalidades más. Es ideal para el mantenimiento de sitios web y para darle un poco de personalización adicional a cualquier tipo de sitio sin importar la tecnología que se halla utilizado para crearlo. Si te da curiosidad, visita nuestro sitio web para más información.