Desde la implementación de hojas de estilo nivel 3 (CSS3) el uso de selectors en páginas web se convirtió en algo muy común, no solo por la versatilidad que ofrecen en cuanto al diseño estético de aplicaciones o páginas, si no por la enorme ventaja que implican desde el punto de vista de codificación, ya que no solo se pueden usar dentro del código CSS, si no también con los métodos de JavaScript querySelector() y querySelectorAll() que permiten un manejo mucho más dinámico de los objetos DOM de una página. Estos métodos se suman a los métodos de selección por id, clase o descendencia, implicando con esto un considerable ahorro de código.
Cualquier entusiasta de las hojas de estilo o de HTML5 me puede reclamar la existencia de más de 10 CSS3 selectors, lo cual es totalmente cierto, pero hoy no seré tan exigente y sólo le propondré que aprenda 10 CSS selectors de uso común, que creo que todos los desarrolladores deberiamos de tener presentes, aunque claro, si desea aprenderlos todos ¿qué mejor? (puede consultar la lista completa de selectors en la especificación oficial aquí). Utilizaré la letra E para señalar a cualquier elemento DOM.
1. Selector E
Permite seleccionar cualquier elemento del tipo E. Este selector no es nuevo pero si es básico e importante.
2. Selector E[atr1]
Selecciona el elemento E que tenga un atributo llamado atr1
3. Selector E[atr1=”dum”]
Selecciona el elemento E que tenga un atributo llamado atr1 cuyo valor sea exactamente dum.
4. Selector E[atr1^=”dum”]
Selecciona el elemento E que tenga un atributo llamado atr1 cuyo valor sea termine con la cadena de caracteres dum.
5. Selector E[atr1$=”dum”]
Selecciona el elemento E que tenga un atributo llamado atr1 cuyo valor sea comience con la cadena de caracteres dum.
6. Selector E[atr1*=”dum”]
Selecciona el elemento E que tenga un atributo llamado atr1 cuyo valor contenga la cadena de caracteres dum.
7. Selector E#elid
Selecciona el elemento E que tenga como valor del atributo id la cadena elid.
8. Selector E:first-child
Selecciona el primer elemento descendiente del padre del elemento E (el primer hijo).
9. Selector E:last-child
Selecciona el último elemento descendiente del padre del elemento E (el último hijo).
10. Selector E:nth-child(n)
Selecciona un elemento descendiente del padre del elemento E que se encuentre en la posición de n.
Si alguien considera que es importante colocar otro selector en la lista y ejemplificarlo…en el pedir está el dar 🙂 . Para ver el pequeño ejemplo que utiliza todos los selectors expuestos haga click aquí.
Enlaces de interés:
Transiciones y Transformaciones en Botones (CSS y HTML5)
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
