Los 30 Selectores CSS Que debes Memorizar

Aprender CSS: La Guía completa

Hemos creado una guía completa para ayudarte a aprender CSS, ya sea que estés empezando con lo básico o quieras explorar CSS más avanzado.

Selectores CSS

¿Así que aprendió los selectores base id, class y descendant y luego lo llamó un día? Si es así, se está perdiendo un enorme nivel de flexibilidad. Te debes a ti mismo el enviar estos selectores avanzados de CSS y CSS3 a la memoria.

Selectores básicos

1. *

* { margin: 0; padding: 0;}

Eliminemos los obvios, para los principiantes, antes de pasar a los selectores más avanzados.

El símbolo de estrella se dirigirá a cada elemento de la página. Muchos desarrolladores usarán este truco para poner a cero los margins y padding. Si bien esto está bien para pruebas rápidas, le aconsejo que nunca lo use en código de producción. Añade demasiado peso al navegador y es innecesario.

El * también se puede utilizar con selectores infantiles.

#container * { border: 1px solid black;}

Esto se dirigirá a cada elemento secundario de #container div. Una vez más, trate de no usar esta técnica mucho, si es que alguna vez.

2. #X

#container { width: 960px; margin: auto;}

Anteponer el símbolo hash a un selector nos permite apuntar a id. Este es fácilmente el uso más común; sin embargo, tenga cuidado al usar selectores id.

Pregúntese: ¿es absolutamente necesario aplicar un id a este elemento para dirigirlo?

id los selectores son rígidos y no permiten su reutilización. Si es posible, primero intente usar un nombre de etiqueta, uno de los nuevos elementos HTML5 o incluso una pseudo-clase.

3. .X

.error { color: red;}

Este es un selector class. La diferencia entre id s y class es es que, con este último, puede dirigirse a varios elementos. Usa class es cuando quieras que tu estilo se aplique a un grupo de elementos. Alternativamente, use id s para encontrar una aguja en un pajar y pinte solo ese elemento específico.

4. X

a { color: red; }ul { margin-left: 0; }

¿Qué pasa si desea dirigirse a todos los elementos de una página, de acuerdo con su type, en lugar de un nombre id o class? Manténgalo simple y use un selector de tipos. Si necesita dirigirse a todas las listas desordenadas, use ul {}.

Demostración en vivo de Selectores Básicos

Selectores Combinadores

5. X Y

li a { text-decoration: none;}

El siguiente selector más común es el selector descendant. Cuando necesite ser más específico con sus selectores, use estos. Por ejemplo, ¿qué pasa si, en lugar de apuntar a todas las etiquetas de anclaje, solo necesita apuntar a los anclajes que están dentro de una lista desordenada? Esto es específicamente cuando usarías un selector de descendientes.

Consejo profesional :Si tu selector se parece a X Y Z A B.error, lo estás haciendo mal. Siempre pregúntate si es absolutamente necesario aplicar todo ese peso.

6. X + Y

ul + p { color: red;}

Esto se conoce como un selector adyacente. Seleccionará solo el elemento que va precedido inmediatamente por el elemento anterior. En este caso, solo el primer párrafo después de cada ul tendrá texto rojo.

7. X > Y

div#container > ul { border: 1px solid black;}

La diferencia entre el estándar X Y y X > Y es que este último solo seleccionará hijos directos. Por ejemplo, considere el siguiente marcado.

 <div> <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 se dirigirá a los ul s que son hijos directos de div con un id de container. No se dirigirá, por ejemplo, al ul que es un hijo del primer li.

Por esta razón, hay beneficios de rendimiento en el uso del combinador para niños. De hecho, se recomienda especialmente cuando se trabaja con motores selectores CSS basados en JavaScript.

8. X ~ Y

ul ~ p { color: red;}

Este combinador de hermanos es similar a X + Y, pero es menos estricto. Mientras que un selector adyacente (ul + p) solo seleccionará el primer elemento que esté precedido inmediatamente por el selector anterior, este es más generalizado. Seleccionará, en referencia a nuestro ejemplo anterior, cualquier elemento p, siempre que siga a ul.

Demostración en vivo de Selectores Combinadores

Selectores de atributos

9. X

a { color: green;}

Conocido como selector de atributos, en nuestro ejemplo anterior, solo seleccionará las etiquetas de anclaje que tengan un atributo title. Las etiquetas de anclaje que no lo hacen no recibirán este estilo en particular. Pero, ¿y si necesitas ser más específico? ¡Mira el siguiente ejemplo!

10. X

a { color: #83b348; /* Envato green */}

El fragmento de código anterior dará estilo a todas las etiquetas de anclaje que se vinculen a https://code.tutsplus.com; recibirán nuestro color verde de marca. Todas las demás etiquetas de anclaje no se verán afectadas.

Tenga en cuenta que estamos envolviendo el valor entre comillas. Recuerde hacer esto también cuando use un motor selector de CSS JavaScript. Cuando sea posible, utilice siempre selectores CSS3 sobre métodos no oficiales.

Esto funciona bien, aunque es un poco rígido. ¿Qué pasa si el enlace de hecho se dirige a Envato Tuts+, pero tal vez el camino sea code.tutsplus.com ¿en lugar de la URL completa? En esos casos, podemos usar un poco de la sintaxis de expresiones regulares.

11. X

a { color: #83b348; /* Envato green */}

Ahí vamos; eso es lo que necesitamos. La estrella indica que el valor de procedimiento debe aparecer en algún lugar del valor del atributo. De esa manera, esto cubre tutsplus.com, code.tutsplus.com, e incluso webdesign.tutsplus.com.

Tenga en cuenta que esta es una declaración amplia. ¿Qué pasa si la etiqueta de anclaje está vinculada a algún sitio que no sea Envato con la cadena tutsplus en la URL? Cuando necesite ser más específico, use ^ y $, para hacer referencia al principio y al final de una cadena, respectivamente.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

¿Alguna vez se ha preguntado cómo algunos sitios web pueden mostrar 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 completamente diferente.

Esto es pan comido con el símbolo de quilates. Se usa más comúnmente en expresiones regulares para designar el comienzo de una cadena. Si queremos apuntar a todas las etiquetas de anclaje que tengan un href que comience por http, podríamos usar un selector similar al fragmento de código que se muestra arriba.

Tenga en cuenta que no estamos buscando https://; eso es innecesario y no tiene en cuenta las URL que comienzan con https://.

Ahora, ¿y si en su lugar quisiéramos diseñar todos los anclajes que enlazan, por ejemplo, a una foto? En esos casos, busquemos el final de la cadena.

13. X

a { color: red;}

De nuevo, usamos un símbolo de expresiones regulares, $, para referirnos al final de una cadena. En este caso, estamos buscando todos los anclajes que enlacen a una imagen—o al menos una URL que termine con .jpg. Tenga en cuenta que esto no capturará imágenes GIF y PNG.

14. X

a { color: red;}

¿Cómo compensamos todos los tipos de imágenes? Bueno, podríamos crear múltiples selectores, como:

a,a,a,a { color: red;}

Pero eso es un dolor, y es ineficiente. Otra posible solución es utilizar atributos personalizados. ¿Qué pasa si agregamos nuestro propio atributo data-filetype a cada ancla que enlaza con una imagen?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Luego, con ese gancho en su lugar, podemos usar un selector de atributos estándar para apuntar solo a esos anclajes.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Aquí hay una especial que impresionará a tus amigos. No mucha gente sabe de este truco. El símbolo tilde (~) nos permite apuntar a un atributo que tiene una lista de valores separados por espacios.

Junto con nuestro atributo personalizado del número 15, arriba, podríamos crear un atributo data-info, que puede recibir una lista separada por espacios de cualquier cosa que necesitemos anotar. En este caso, tomaremos nota de los enlaces externos y los enlaces a imágenes, solo para el ejemplo.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Con ese marcado en su lugar, ahora podemos apuntar a cualquier etiqueta que tenga cualquiera de esos valores, utilizando el truco del selector de atributos ~.

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

Bastante ingenioso, ¿eh?

Demostración en vivo de Selectores de atributos

Pseudo Selectores

16. X: visitado y X:enlace

a:link { color: red; }a:visited { color: purple; }

Utilizamos la pseudo-clase :link para apuntar a todas las etiquetas de anclaje en las que aún no se ha hecho clic.

Alternativamente, también tenemos la pseudo clase :visited, que, como es de esperar, nos permite aplicar un estilo específico solo a las etiquetas de anclaje en la página en la que se ha hecho clic o «visitado».

17. X: marcado

input:checked { border: 1px solid black;}

Esta pseudo clase solo se dirigirá a un elemento de interfaz de usuario que haya sido marcado—como un botón de opción o una casilla de verificación. Es tan simple como eso.

18. X: después de

Las pseudo clases before y after son geniales. Todos los días, al parecer, la gente está encontrando formas nuevas y creativas de usarlos de manera efectiva. Simplemente generan contenido alrededor del elemento seleccionado.

Muchos se introdujeron por primera vez en estas clases cuando se encontraron con el truco de reparación clara.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

Este hack utiliza la pseudo clase :after para añadir un espacio después del elemento y luego borrarlo. Es un truco excelente para tener en su bolsa de herramientas, particularmente en los casos en que el método overflow: hidden; no es posible.

Para otro uso creativo de esto, consulte mi consejo rápido sobre la creación de sombras.

De acuerdo con la especificación de selectores CSS3, técnicamente debe usar la sintaxis de pseudo elemento de dos puntos ::. Sin embargo, para seguir siendo compatible, el agente de usuario también aceptará un solo uso de dos puntos.

19. X: hover

div:hover { background: #e3e3e3;}

Oh vamos. Conoces a este. El término oficial para esto es»pseudo clase de acción de usuario». Suena confuso, pero en realidad no lo es. ¿Quieres aplicar un estilo específico cuando un usuario pasa el cursor sobre un elemento? ¡Esto hará el trabajo!

Tenga en cuenta que las versiones anteriores de Internet Explorer no responden cuando la pseudo clase :hover se aplica a cualquier cosa que no sea una etiqueta de anclaje.

Lo más frecuente es que utilices este selector cuando apliques, por ejemplo, un border-bottom a etiquetas de anclaje, cuando se cierne sobre ellas.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; se ve mejor que text-decoration: underline;.

20. X: no(selector)

div:not(#container) { color: blue;}

La pseudo clase negación es particularmente útil. Digamos que quiero seleccionar todos los divs, excepto el que tiene un id de container. El fragmento de código anterior manejará esa tarea perfectamente.

O, si quisiera seleccionar todos los elementos (no se recomienda), excepto las etiquetas de párrafo, podríamos hacer:

*:not(p) { color: green;}

21. X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

Podemos usar pseudo elementos (designados por ::) para dar estilo a fragmentos de un elemento, como la primera línea o la primera letra. Tenga en cuenta que estos deben aplicarse a elementos a nivel de bloque para que surtan efecto.

Un pseudo-elemento se compone de dos puntos: ::

Apuntar a la primera letra de un párrafo

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Este fragmento es una abstracción que encontrará todos los párrafos de la página y, a continuación, subobjetivo solo a la primera letra de ese elemento.

Esto se usa con mayor frecuencia para crear un estilo similar al de un periódico para la primera letra de un artículo.

Apunte a la primera línea de un párrafo

p::first-line { font-weight: bold; font-size: 1.2em;}

De manera similar, el pseudo elemento ::first-line, como es de esperar, solo dará estilo a la primera línea del elemento.

«Para la compatibilidad con hojas de estilo existentes, los agentes de usuario también deben aceptar la notación anterior de un solo punto para pseudo-elementos introducidos en los niveles 1 y 2 de CSS (a saber, :first-line, :first-letter, :before y :after). Esta compatibilidad no está permitida para los nuevos pseudo-elementos introducidos en esta especificación.»- Especificaciones de Selectores W3C

Demostración en vivo de Pseudo Selectores

Enésimo Selectores Secundarios y de tipo

22. X: enésimo hijo (n)

li:nth-child(3) { color: red;}

¿Recuerdas los días en que no teníamos forma de apuntar a elementos específicos de una pila? ¡La pseudo clase nth-child resuelve eso!

Tenga en cuenta que nth-child acepta un entero como parámetro, pero esto no está basado en cero. Si desea dirigirse al segundo elemento de la lista, utilice li:nth-child(2).

Incluso podemos usar esto para seleccionar un conjunto de variables secundarias. Por ejemplo, podríamos hacer li:nth-child(4n) para seleccionar cada cuarto elemento de la lista.

23. X: enésimo último hijo (n)

li:nth-last-child(2) { color: red;}

¿Qué pasaría si tuviera una enorme lista de elementos en un ul y solo necesitara acceder, por ejemplo, al tercer y último elemento? En lugar de hacer li:nth-child(397), podría usar la pseudo clase nth-last-child.

Esta técnica funciona casi de la misma manera que el número 16 anterior. La diferencia es que comienza al final de la colección, y se abre camino hacia atrás.

24. X: n-ésimo tipo(n)

ul:nth-of-type(3) { border: 1px solid black;}

Habrá momentos en los que, en lugar de seleccionar un child, deberá seleccionar de acuerdo con el type del elemento.

Imagine un marcado que contiene cinco listas desordenadas. Si solo querías estilizar la tercera ul, y no tenías un id único para engancharte, podrías usar la pseudo clase nth-of-type(n). En el fragmento de código anterior, solo el tercero ul tendrá un borde alrededor.

25. X: enésima-última-de-tipo(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

Y sí, para seguir siendo consistentes, también podemos usar nth-last-of-type para comenzar al final de la lista de selectores y trabajar de regreso para apuntar al elemento deseado.

26. X: primer hijo

ul li:first-child { border-top: none;}

Esta pseudo clase estructural nos permite apuntar solo al primer hijo del padre del elemento. A menudo usará esto para eliminar bordes de los elementos de la primera y última lista.

Por ejemplo, supongamos que tiene una lista de filas, y cada una tiene un border-top y un border-bottom. Bueno, con ese arreglo, el primer y último elemento de ese conjunto se verá un poco extraño.

Muchos diseñadores aplican clases de first y last para compensar esto. En su lugar, puede usar estas pseudo clases.

27. X: último hijo

ul > li:last-child { color: green;}

Lo contrario de first-child, last-child se dirigirá al último elemento del elemento padre.

last-child Ejemplo de selector

Construyamos un ejemplo simple para demostrar un posible uso de estas clases. Crearemos un elemento de lista con estilo.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

Para el marcado, no hay nada especial: solo una lista simple.

Aquí está el CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

Este estilo establecerá un fondo, eliminará el relleno predeterminado del navegador en ul y aplicará bordes a cada li para proporcionar un poco de profundidad.

Para añadir profundidad a tus listas, aplica un border-bottom a cada li que sea uno o dos tonos más oscuros que el color de fondo de li. A continuación, aplique un border-top que es un par de tonos más claros.

El único problema, como se muestra en la imagen de arriba, es que se aplicará un borde en la parte superior e inferior de la lista desordenada, lo que parece extraño. Usemos las pseudo clases :first-child y :last-child para solucionar esto.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Ahí vamos; ¡eso lo arregla!

28. X: hijo único

div p:only-child { color: red;}

A decir verdad, probablemente no se encontrará usando la pseudo clase only-child con demasiada frecuencia. Sin embargo, está disponible, en caso de que lo necesite.

Le permite apuntar a elementos que son el único hijo de su padre. Por ejemplo, al hacer referencia al fragmento de código anterior, solo el párrafo que es el único hijo de div se coloreará en rojo.

Asumamos el siguiente marcado.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

En este caso, los párrafos del segundo divno estarán dirigidos; solo el primero div. Tan pronto como se aplica más de un elemento secundario a un elemento, la pseudo clase only-child deja de tener efecto.

29. X: solo de tipo

li:only-of-type { font-weight: bold;}

Esta pseudo clase estructural se puede usar de algunas maneras inteligentes. Se dirigirá a los elementos que no tengan hermanos dentro de su contenedor padre. Como ejemplo, vamos a apuntar a todos los uls que tienen un solo elemento de lista.

Primero, pregúntate cómo lograrías esta tarea. Podría hacer ul li, pero esto se dirigiría a todos los elementos de la lista. La única solución es usar only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: primera clase

La pseudo clase first-of-type le permite seleccionar los primeros hermanos de su tipo.

Una prueba

Para comprender mejor esto, hagamos una prueba. Copie el siguiente marcado en su editor de código:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Ahora, sin leer más, trata de averiguar cómo apuntar solo a «Elemento de lista 2». Cuando lo hayas descubierto (o te hayas dado por vencido), sigue leyendo.

Solución 1

Hay una variedad de formas de resolver esta prueba. Revisaremos un puñado de ellos. Comencemos usando first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Este fragmento esencialmente dice, para encontrar la primera lista desordenada en la página, luego busque solo los hijos inmediatos, que son elementos de lista. A continuación, filtre eso hasta solo el segundo elemento de lista de ese conjunto.

Solución 2

Otra opción es utilizar el selector adyacente.

p + ul li:last-child { font-weight: bold;}

En este escenario, encontramos el ul que inmediatamente procede de la etiqueta p, y luego encontramos el último hijo del elemento.

Solución 3

Podemos ser tan desagradables o tan juguetones como queramos con estos selectores.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Esta vez, tomamos el primer ul de la página, y luego encontramos el primer elemento de la lista, ¡pero comenzando desde la parte inferior!

Demostración en vivo de los Enésimos Selectores Secundarios y de tipo

Conclusión

Si compensa los navegadores más antiguos, como Internet Explorer 6, debe tener cuidado al usar estos selectores más nuevos. Pero, por favor, no dejes que eso te impida aprender esto. Te estarías haciendo un gran daño a ti mismo. Asegúrese de consultar aquí una lista de compatibilidad con navegadores. Alternativamente, puede usar el excelente IE9 de Dean Edward.script js para dar soporte a estos selectores en navegadores antiguos.

En segundo lugar, cuando se trabaja con bibliotecas JavaScript, como la popular jQuery, siempre intente usar estos selectores CSS3 nativos sobre los métodos/selectores personalizados de la biblioteca, cuando sea posible. Hará que tu código sea más rápido, ya que el motor de selección puede usar el análisis nativo del navegador, en lugar del propio.

Es genial que estés pasando tiempo aprendiendo los fundamentos del diseño web, pero si necesitas una solución rápida, una de nuestras plantillas CSS listas para usar podría ser una buena opción. También tenemos algunos elementos CSS premium para que los considere.

• 
  CSS3
  15 Elegantes Tablas de Precios CSS para Su Último Proyecto Web
  Monty Shokeen
• 
  Bootstrap 4
  18 Mejores Complementos de Bootstrap 4
  Monty Shokeen

Acceso gratuito a Envato Elements durante 1 mes

Finalmente, aquí tienes una oferta muy especial para ayudarte a crear sitios y aplicaciones de aspecto profesional. Además de usar estos selectores CSS, ¿por qué no aprovechar fotos de archivo de alta calidad, material de video, fuentes premium, gráficos, ilustraciones y más?

Normalmente, tendrías que pagar por recursos como ese. Pero ahora mismo, puedes acceder a millones de recursos creativos para tus proyectos de codificación durante todo un mes, de forma totalmente gratuita. Y lo que es más, obtienes descargas ilimitadas, por lo que puedes tomar todo lo que quieras durante ese mes, ¡y solo pagar si decides continuar!

Para aprovechar esta oferta, haga clic en este enlace especial de registro o ingrese el código a continuación en la página de registro:

elements_cont_tuts-freemonth1-4bwkbp

No esperes demasiado—¡la oferta solo es válida por un tiempo limitado!