Cada vez que usamos CSS, usamos selectores. Pero a pesar de esto, los selectores de CSS son una de las partes más olvidadas de la especificación.
Hablamos de las grandes transformaciones en CSS3, pero con demasiada frecuencia olvidamos los conceptos básicos. El buen uso de los selectores hace que nuestra codificación diaria sea más simple y más elegante. Hoy voy a cubrir los 10 selectores que a menudo se nos escapan, pero que son efectivos y altamente útiles.
El * selector puede ser el que recuerde con más facilidad, pero a menudo no se usa bien. Lo que hace es diseñar todo en la página y es ideal para crear un restablecimiento y también para crear algunos valores predeterminados de página como la familia de fuentes y el tamaño que desea tener.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Este selector se llama selector adyacente y lo que hace es seleccionar el elemento que está inmediatamente después del primer elemento. Si quisiera seleccionar el primer div después de nuestro encabezado, debería escribir:
header + div {margin-top: 50px;}Este selector solo seleccionará los hijos directos a diferencia de AB que seleccionará cualquier nivel de hijos de A. Este selector se recomienda para cuando está trabajando con secundarios de primer nivel de un elemento primario. Por ejemplo, si desea seleccionar los elementos de la lista de primer nivel en una lista desordenada que se ve así:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Utilizaría este selector porque el selector AB habitual también seleccionará los elementos de la lista dentro de la lista desordenada anidada
ul > li {background: black;color: white;}Este es un muy buen selector para cuando quieres darle un estilo a un enlace en particular de una manera diferente, lo que esté entre comillas se comparará con el href del enlace. Por ejemplo, para darle estilo a todos los enlaces a Facebook con el color azul que usaría:
a[href*="facebook"] {color: blue;}También hay una versión sin * que coincide con la URL exacta que puede usar para enlaces exactos.
Este selector es particularmente útil debido a su cláusula de negación que le permite seleccionar cualquier grupo de elementos que no coincidan con lo que coloca en B. Si desea seleccionar cada div excepto el pie de página que necesita:
div:not(.footer) {margin-bottom: 40px;}El primer hijo y el último hijo nos permiten seleccionar el primer hijo y el último hijo del elemento primario. Esto puede ser una gran ayuda cuando se trata de enumerar elementos y eliminar el margen derecho o los bordes. Para eliminar el borde en el primer elemento de la lista y el margen en el último elemento de la lista que necesita:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}El enésimo niño es una manera simple de seleccionar cualquier elemento secundario de un elemento por su orden. Si, por ejemplo, deseara el tercer elemento de la lista en una lista desordenada, este sería el camino a seguir:
ul li:nth-child(3) {background: #ccc;}Podemos usar nth-child para seleccionar cada multiplicador de un número usando la variable n, por ejemplo, si ponemos 3n, seleccionaríamos el número de elemento de la lista 3, 6, 9, 12 y así sucesivamente.
El enésimo último hijo funciona como el n-ésimo hijo, pero en lugar de contar desde el primer elemento de la lista comienza a contar desde el último, por lo que si lo usa con el número dos seleccionará el elemento de la lista que viene antes del último y su uso es como el selector nth-child:
ul li:nth-last-child(2) {background: #ccc;}Este selector hace exactamente lo que crees que hace; ve qué tipo de elemento colocaste en él y selecciona, por ejemplo, el tercer elemento de tu página que coincida con lo que escribiste. Para seleccionar el tercer párrafo en un div, deberías usar:
div p:nth-of-type(3) {font-style: italic;}¿Ha notado alguna vez que cuando busca algo en google, las páginas que ya ha visto aparecen en un color diferente? Eso es exactamente lo que visitó hace. Esta es una gran adición para los usuarios, pero a veces se olvida y, según mi experiencia, es útil cada vez que busco en Google.
a:visited {color: blue;}En mi experiencia usando este tipo de selectores cuando codificamos podemos ahorrarnos mucho tiempo y también evitar la necesidad de una gran cantidad de identificaciones que llenan nuestro marcado. Y esto es solo el comienzo de los selectores de CSS, hay muchos más selectores que son realmente útiles pero a veces se olvidan.
¿Utiliza selectores de CSS en sus hojas de estilo? ¿Es más fácil recurrir a los ID y las clases? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de código a través de Shutterstock.