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.