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.


Generador de Selectores CSS

Last updated - May 20, 2019

En esta entrada damos una brevísima introducción a los selectores CSS y explicarmos a detalle el funcionamiento de la herramienta para generar selectores que hemos desarrollado. Si te consideras ya un experto en CSS y dominas el tema, sin más preámbulo puedes acceder a la herramienta dándo clic al siguiente botón:


La herramienta funciona mejor en Google Chrome


Uno de los pilares del desarrollo web moderno son las hojas de estilo en cascada o CSS por sus siglas en inglés (Cascade Style Sheets). Esta tecnología permite una separación clara entre la estructura de una página web y su diseño, y representa como su nombre lo indica un mecanismo que permite que los estilos se apliquen "en cascada" es decir, que los estilos definidos para un elemento padre definido en el código HTML se "heredan" o afectan a su vez a los hijos de este.

Recordemos que un navegador convierte el HTML en una representación jerárquica que se conoce como árbol DOM (Document Object Model). Esta representación desempeña un papel fundamental en el funcionamiento del CSS ya que permite definir los estilos de acuerdo a la estructura y contenido que se definió en el código HTML de una página web.

Pues bien, cada archivo de código CSS contiene selectores y reglas. Para cada selector existirán un conjunto de reglas de estilo que van a establecer cómo se deberá decorar el o los elementos señalados por el selector.

Cada uno de estos selectores representan una ruta tan específica o amplia como se requiera de acuerdo a los elementos que se vayan a estilizar y para esto ya existen algunos parámetros muy bien definidos. Así pues tenemos selectores de acuerdo al identificador único del elemento (que se pretende sea único pero no se obliga) indicado en el atributo ID y que se representa en CSS como '#<valor del atributo>' o bien los selectores de "clase" que son valores definidos en el atributo CLASS y un sin fin de formas que permiten construir selectores de acuerdo al tag, cualquier otro atributo o posición dentro del arbol DOM del elemento que se desea decorar.

Merece mención aparte los selectores de clase, ya que están indicados para seleccionar más de un elemento y para entenderlos es preciso tener en cuenta lo siguiente: El valor del atributo CLASS de un elemento HTML contiene una o varias clases separadas por un espacio en blanco y estas clases se pueden repetir en varios elementos, que es de hecho uno de los propositos. En CSS cada clase se representa de forma individual con la forma '.<clase>' y pueden combinarse en un selector o usarse de forma individual, así que cualquier elemento que contenga el nombre de un selector de clase en alguna parte de su atributo CLASS quedará cubierto por este.

Nuestro generador de selectores CSS se ocupa exclusivamente de calcular selectores para el elemento que sea seleccionado en una página web. Se trata de una útil herramienta con la cual podrás obtener 3 opciones de selectores que te mostrarán diferentes estrategias para seleccionar un elemento con CSS.


Porqué Utilizar Esta Herramienta

Ya sea porque tienes prisa para modificar el estilo de un elemento en tu página o bien deseas obtener algunas ideas para dar con el elemento que quieres decorar con CSS o simplemente estás aprendiendo la tecnología y quieres estar seguro de que lo estás haciendo correctamente; encontrarás que el generador de selectores CSS te facilitará la tarea.

Si bien los selectores generados por la herramienta son precisos y confiables, te recomendamos probarlos antes y no usarlos a ciegas. Es algo que tendrás que hacerlo por tu cuenta ya que el generador únicamente te ofrece alternativas de selectores CSS, pero no cuenta con funcionalidad para agregar estilos. Continuaremos mejorando esta herramienta, así que aceptamos con gusto cualquier critica o sugerencia.


Visualizando Selectores CSS


Si te preguntas cómo luce esta herramienta aquí tienes una vista previa rápida:

Tool screenshot

Lo más interesante sobre este generador es quizá el hecho de que se trata de una herramienta completamente en línea, lo cuál es uno de los principales objetivos. Para cumplir con esto, hacemos uso de algunas técnicas que a través de un iframe y otras tecnologías complementarias que hemos desarrollado se puede llevar a cabo una interacción con tu página sin mayores complicaciones.

De hecho utilizamos un esquema similar en la app SaaS que nos encontramos desarrollando, así que es algo que continuamos afinando día con día. Cabe destacar que el campo URL que ves en la parte superior no cuenta con la misma funcionalidad que la barra de dirección de tu navegador, así que es necesario ingresar una dirección URL completa y válida. Te recomendamos cargar primero tu página en otro tab y copiar el URL de vuelta en la herramienta.

Después de ingresar el URL de tu página y dar clic en el botón de cargar, la página será desplegada en el iframe y ya sólo quedará un último paso que no puede ser más sencillo: Pasar tu mouse sobre cualquier elemento de la página y ver lo que sucede. Ya habrás notado que hay tres grandes campos adicionales, estos se van a llenar con los selectores generados como te diré a continuación.


Navegando Por Elementos


Explora con tu mouse la página y haz clic en cualquier elemento de los que se van iluminando visualmente. Los tres grandes campos de los que te comentaba anteriormente se llenarán al instante con las opciones de selectores CSS que se han generado. Además puedes navegar por la jerarquía del elemento hasta llegar al tag BODY que debe ser siempre el elemento padre de todo el contenido de una página web. Esta jerarquía esta representada con una serie de botones a manera de breadcrumb, y puedes hacer clic en cada uno para seleccionar los ancestros del elemento que seleccionaste originalmente, algo que te puede resultar útil también.

El botón en color negro con la X te permite limpiar la selección que realizaste y de paso limpiar los campos de los selectores que se generaron. Otra manera de limpiar la selección actual es simplemente dar scroll a la página. Finalmente cada uno de esos campos de selectores contiene un botón que te ayudará a copiar su contenido al portapapeles fácilmente para utilizarlo en otra aplicación.



Element tree navigation


Y eso es todo. Utiliza la herramienta y ahorrate algo de tiempo cuando estés pensando en cómo hacer un selector para agregar estilos a algún elemento de tu página. No olvides dejarnos tus comentarios.

Esperamos que esta herramienta te ayude a mejorar tus habilidades para escribir selectores CSS. Consideramos que al visualizar las distintas alternativas que te proporciona, dominarás más rápido y mejor esta interesante tecnología.


The CSS Selector Tool

Last updated - May 15, 2019

After publishing our first tool for getting higher specificity CSS Selectors, several users asked us why not having a tool to help them get a CSS Selector in the first place.

So we made one. In this article, I will explain in detail how this tool work and how it can help beginners and experienced web developers alike.


For best results use it with Chrome


This is a useful tool for generating CSS selectors for an specific element in a page. It calculates not just 1 but 3 selector alternatives to choose from which gives you enough clue to create the perfect selector for your use case, or simply use one of the provided options as is.


Why Use A CSS Selector Generator


Either if you are in a hurry to get a job done or want to get some ideas for getting to that element you want to style, or simply you're learning CSS and want to make sure you're doing it the right way, you'll find using this tool is actually not a bad idea. Modern web development takes CSS knowledge for granted and selectors are the cornerstone of the whole technology.

While the CSS selectors generated by the tool are mostly accurate, you better test before deploying (as should always be with any code) as the algorithms may not be 100% accurate under certain circumstances. We will continue improving the tool in the future so we appreciate any feedback you can provide.


Visualizing CSS Selectors


If you wonder how this tool looks like here is a quick preview:

Tool screenshot

The most interesting thing about this tool is perhaps the fact that it is completely online. In order to make the tool fully online and to accomplish the task we wanted it to do, we rely on an IFRAME and some other fancy tricks to make interacting with the page less troublesome.

We use a similar approach in our incoming service and we keep improving it everyday. In any case it is worth noting that the URL field is not a browser address bar so it lacks browser functionality like fixing incorrect URLs with a web service. You'll have to enter the full valid URL of the page you want to test with this tool. Just open it up in another tab and copy the URL back into the tool.

Once you enter the URL and hit Enter, the page will be loaded in the frame and you will be just one step away from visualizing generated CSS Selectors for any element you want. At this point you should have already noticed there are three large fields that eventually will hold the generated selectors.


Navigating Through Elements


Just go ahead and click any element in the page. The three large fields will instantly populate with the CSS selector options. You can go any level up into the element tree hierarchy all the way to the BODY tag and generate selectors along the way by clicking on the breadcrumb like buttons that appear at the top of your page once you select an element, something you may find useful.

The 'X' button on the left most side lets you clear the element selection including the fields containing the generated selectors as well. Another way to clear whats currently selected in the page is by just scrolling. Lastly, all of the three selector fields have a button for easily copy the field content to the clipboard.


Element tree navigation


And this is it. Play with the tool and save some time getting selectors for any element in the page. Don't forget to leave us some feedback if you feel like it.

We hope this tool help you improve your CSS Selector authoring skills, by looking at how you can get to any element with different approaches provided by the generated options.


Crowdfunding Campaign Date

Last updated - May 08, 2019

A couple of months ago we took the decision to let the world know about this project with a crowdfunding campaign on Indiegogo. Since then we have been taking time working in a pre-launch phase in preparation for the real campaign.

And we're still on it, but the time has come to finally set a date to get our real campaign rolling. So it is with great pleasure that I share with you the news:

Our crowdfunding campaign officially begins on June 24, 2019.


This is the very first campaign we run for a project and it has been so far a very challenging process. However we keep our expectations as down to earth as possible.

There are many fairy tale stories and people very vocal about their success, but there are also a big amount of negative experiences people share too, specially customers that were ripped off and never got the product they expected or never got it at all.

Rest assured we're set to deliver Aliadoc whatever the outcome we get from this crowdfunding experience. Certainly it's probably going to take longer to release if we get little support. But even one supporter will make a difference.

Feel free to ask any question about the project and/or the campaign you may have. We will be happy to help.

CSS Selector Specificity Compare Tool

Last updated - May 05, 2019

Easily test, compare and tweak selectors to discover the one with higher specificity.
For a given selector, the tool generates 2 alternatives, toggle between them
to visually identify the one with higher specificity.

For best results use it with Chrome

While this is not always the case I must confess many times I have found myself caught investing more time than I wanted trying to override CSS style rules I didn't create and can't remove from a page either. A common issue people get while trying to customize a template or update some styling of an existing website.

So what does web developers do most of the time when they face this specific problem? Well, anecdotal observations (no science involved here) suggest some of the most popular approaches to get around this problem are:

1. Using !important in rules like crazy.
2. Setting the style attribute with the rules you want to change. (desperate case)

Both of these approaches are for the most part wrong. Most likely experienced folks would try to solve this issue by tweaking CSS selector specificity. If you haven't heard about this concept before I will explain it briefly a bit later but first let me start with a more basic and yet sometimes misunderstood concept.

What is a CSS Selector


According to the W3C definition, a selector is a pattern matching rule to target elements in the document tree in order to apply styling rules. Selectors can range from simple element names to rich contextual patterns, which can be defined in terms of attributes values (id and class attributes being specially intended for this purpose) and much more. In short, they are used to select the elements you want to style in a web page.

What is Selector Specificity


Given a set of selectors targeting the same element, how does the browser decides which one to apply? This is precisely were the CSS selector specificity concept comes in. Given a set of matching rules or selectors as I explained earlier, specificity will ultimately determine which styles are the most relevant to be applied to an element. Browsers must calculate specificity in strict terms giving a weight to each selector declaration, so website developers expect the same behavior across different browser vendors.

Dealing with specificity is not as easy as you might think, luckily the whole concept only applies when more than one selector targets the same element or set of elements, which is exactly what happens when we want to override a style defined by some CSS library our page uses, a common situation in modern web design.

So in order to solve a styling conflict without having to modify HTML markup (by using the style attribute) or setting the !important keyword to rules potentially leading to even more conflicts, a better alternative is to use a higher specificity selector that will naturally override others by using browser's built in specificity weighting rules.

The Selector is the key


To control conflicting styles, we should care more about the selector we're using to set our style rules than the rules themselves. By carefully crafting your selector with the required specificity you can tame this beast with less effort, but for that you will need to dig into this concept deeper and try different alternatives to figure out which one will work for you. ...Or you can "cheat" a little bit and have a tool help you generate selector alternatives to get out of this problem faster.

The CSS Selector Specificity Compare Tool


The idea behind this tool came from the project we are currently working on. One of the requirements it has is to override styles all the time so users get the desired results. We thought it could be a good idea to share a tool to generate selector alternatives with potentially higher specificity so people can have something to work with while troubleshooting a selector and visualize targeted elements better to further tweak according to their needs. If you have problems to identify your initial selector to begin with, we have a different tool to help you exactly with that.

This tool will generate 2 selector alternatives for an initial input, the alternatives should target the same elements as the original one. After you enter and apply the initial selector, targeted elements will highlight in a green dotted outline, while the alternatives will simultaneously be generated but not applied. You will then have the possibility to toggle on and off any of them and compare which one has better specificity by looking at the outline color of the elements highlighted. If you think any of the alternatives can be tweaked or improved further you can modify them manually right away and re-apply them with your changes.

But for all that to happen of course you first need to tell the tool which web page you will use for this exercise (it won't work for local/offline resources). The proposed alternatives are certainly not so beautiful. However you'll be able to do some specificity hacking by tweaking them according to your taste and see visually which one wins the specificity fight. Even if the proposed selectors are not exactly what you had in mind, don't forget the tool also allows you to further tweak any of them and test if they will override the original one in a way that suits your needs.

Set your website URL and enter the selector you're troubleshooting. Apply it to the page to get alternatives.

Toggle first alternative to test a class based selector, if targeted elements highlight changes to blue, its specificity is higher.

Second alternative will give you a more verbose selector based on tag names, hierarchy positions and ids. 


As I mentioned above we at Aliadoc play a lot with the specificity concept in order to override existing styles. We are building a SaaS app to visually upgrade the styling of existing websites easily. It's great for site maintenance and to perform extra design customization in any kind of page no matter what technology was used to create it. If you're curious, visit our website to learn more.

We hope you had the chance to use this comparator tool. Leave any feedback in the comments area below to help us improve it.