¡10 CSS3 Selectors que hay que tener en mente!


El utilizar hojas de estilo nivel 3 (CSS3) y sus nuevos selectors en aplicaciones HTML5 es algo cada vez más común, no solo por la versatilidad que ofrecen en cuanto al diseño estético de la aplicación o página, si no por la enorme ventaja que implican desde el punto de vista de programación, ya que se pueden usar no solo en los archivos .css, si no también con los nuevos 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.

Algún entusiasta del las hojas de estilo o del 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 solo le propondré que aprenda de memoria 10 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í.

IT professional with several years of experience in management and systems development with different goals within public and private sectors.

Leave Comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: