¿Ya conoces los selectores básicos id, class, y descendant? Si cree que con eso ya te apañas, te estás perdiendo un enorme nivel de flexibilidad. Mientras que muchos de los selectores mencionados en éste artículo son parte de CSS3, y están por tanto, sólo disponibles en navegadores modernos, deberías desde ya comenzar a dominarlos.
1. *
* {
margin: 0;
padding: 0;
}Comencemos con los más obvios, antes de continuar con selectores más avanzados.
El asterisco se centrará en cada uno de los elementos en la página. Muchos desarrolladores usarán éste truco para poner a cero el margin y padding.. Mientras que esto está ciertamente bien para pruebas rápidas, yo te recomendaría que nunca uses esto en tu código final. Esto añade mucho peso en el navegador y es innecesario.
El * puede ser usado también con selectores de hijos.
#container * {
border: 1px solid #000000;
}Esto añadira un borde a cada uno de los elementos que sea hijo de #container.. De nuevo, trata de no usar mucho ésta técnica, si no es que nunca.
2. X + Y
ul + p {
color: #990000;
}Este se conoce como un selector adyacente. Seleccionará solamente el elemento que es inmediatamente precedido por el primer elemento. En éste caso, solo el primer párrafo después de cada ul tendrá texto rojo.
3. X > Y
div#container > ul {
border: 1px solid #000000;
}La diferencia entre el estándar X Y y X > Y es que el último sólo seleccionará hijos directos. Por ejemplo, considera el siguiente código.
<div id="container">
<ul>
<li>List Item
<ul>
<li>Child</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>Un selector de #container > ul solo afectará los uls que sean hijos directos del div con id de container. No afectará, por ejemplo, el ul que sea hijo del primer li.
Por ésta razón, hay beneficios de desempeño por usar el elemento de hijo. De hecho, es recomendable particularmente cuando se trabaja con motores de selectores CSS basados en JavaScript.
4. X ~ Y
ul ~ p {
color: #990000;
}Este elemento “hermano” es similar a X + Y, sin embargo, es menos estricto. Mientras que un selector adyacente (ul + p) sólo selecciona el primer elemento que es inmediatamente precedido por el primer selector, éste es más generalizado. Seleccionará, refiriéndonos al ejemplo de arriba, cualquier elemento p, siempre y cuando estén después de un ul.
5. X[href^=”http”]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}¿Alguna vez te has preguntado cómo es que algunos sitios son capaces de desplegar un pequeño icono junto a los enlaces que son externos? Estoy seguro de que los has visto antes; son buenos recordatorios de que el enlace te dirigirá a un sitio web totalmente diferente.
Esto es un juego de niños con el símbolo de intercalación. Es más comúnmente usado en expresiones regulares para designar el inicio de una cadena de texto. Si queremos afectar todas las etiquetas anchor que tienen un href que comienza con http, podríamos usar un selector similar al fragmento mostrado arriba.
Ahora, ¿si en vez de eso quisiéramos aplicar estilo a todas las etiquetas anchor que enlacen a, por decir, una foto? En esos casos, busquemos el final de la cadena de texto. Ejemplo:
a[href$=".jpg"] {
color: red;
}¿como compensamos para los diferentes tipos de imagen: png, jpeg,jpg, gif? Bueno, podríamos crear múltiples selectores, tal como:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}Pero, eso seria muy ineficiente. Otra posible solución es usar atributos personalizados. ¿Y si agregáramos nuestro propio atributo data-filetype para cada anchor que enlaza a una imagen
<a href="path/to/image.jpg" data-filetype="image">Image Link</a>
Entonces, dicho esto, dicho esto, podemos usar un selector de atributos estándar para afectar sólo a esos anchors.
a[data-filetype="image"] {
color: red;
}
Conclusión
Si estás compensando para navegadores más antigüos, como Internet Explorer 6, tienes que seguir teniendo cuidado cuando uses éstos nuevos selectores. Pero, por favor no dejes que eso te impida aprenderlos. De manera alternativa, puedes usar El excelente script IE9.js de Dean Edward para soportar estos selectores en navegadores más antigüos.
En segundo lugar, cuando trabajes con librerías JavaScript, como la popular Jquery, siempre trata siempre de usar éstos selectores nativos de CSS3 en vez de los métodos y selectores personalizados de la librería, cuando sea posible. Esto hará to código más rápido, ya que el motor de selectores puede usar el analizador nativo del navegador, en vez del propio.
¡Gracias por leerme, y espero que hayas tomado un truco o dos!