Saltar al contenido
Ahorre tiempo buscando los selectores CSS importantes.
Una guía completa puede ayudar a los desarrolladores web a evitar errores comunes y adoptar un enfoque coherente y eficiente en el uso de selectores CSS.
Esta guía es un recurso único para que los desarrolladores puedan consultar todos los selectores de CSS más útiles y populares .
¿Qué son los selectores en CSS?
Los selectores CSS se utilizan para apuntar a elementos específicos en la página web. Además, los selectores son la clave de todo el proceso de diseñar y modificar la página web y sus elementos.
Hay varios tipos de selectores CSS y aprenderás casi todos.
Selector de clases
El selector de clases CSS juega un papel muy importante cuando hablamos de diseño o estructura. Entonces puedes decir que es un selector imprescindible en tu código.
Puntos clave:
- El símbolo punto o punto (.) se utiliza para seleccionar una clase en CSS.
- La clase se puede utilizar para seleccionar varios elementos a la vez.
- La clase es reutilizable.
Ejemplo:
Cambia el color de fondo de todos los elementos con el nombre de clase " modal ".
Selector de ID CSS
Los selectores de ID se utilizan para apuntar a un elemento de la página que es único. Significa "Identificador".
Puntos clave:
- El símbolo hash ( # ) se utiliza para seleccionar una identificación en la clase
- Debe ser único para una página o documento.
- Las identificaciones no son reutilizables. Nunca deberías preferir usar más de uno en una página.
Ejemplo:
Cambia el color de fondo de la página de inicio.
Selector universal de CSS
El selector universal (*) es un selector CSS que coincide con cada elemento.
Puntos clave:
- El símbolo Asterix ( * ) se utiliza para seleccionar todos los elementos.
- Los desarrolladores lo utilizan principalmente para restablecer el relleno, los márgenes y algunos comportamientos predeterminados del navegador.
- Siempre debes usarlo.
Ejemplo:
Restablezca todo el margen y el relleno predeterminados del navegador a cero.
Selector de CSS de agrupación
Considérelo un selector de optimización. Puede agrupar varios selectores y aplicarles estilos comunes. Bastante útil.
Puntos clave:
- El símbolo coma ( , ) se utiliza para seleccionar varios elementos a la vez.
- Los desarrolladores lo utilizan principalmente para optimizar el código.
- Reduce el tiempo de escribir el mismo código varias veces para elementos similares
Ejemplo:
Hay cuatro variaciones de botones. Pero sólo necesitamos aplicar border-radius a .btn-primary y .btn-secundario
En lugar de hacer esto:
.btn-primario{ }
.btn-secundario{}
Utilice el selector CSS de agrupación :
Selector de elementos CSS
El selector de elemento o tipo nos permite elegir cualquier elemento HTML con su nombre en la página y empezar a estilizarlo con reglas CSS.
puntos clave:
- Puedes seleccionar cualquier elemento con el nombre
- Es bastante sencillo
- Los desarrolladores lo usan principalmente para agregar estilos predeterminados para los elementos.
Ejemplo:
Agregue familia de fuentes, tamaño de fuente al elemento del cuerpo
Selector de descendientes
El selector combinador descendiente incluye todos los elementos que son hijos del elemento actual. En CSS, esto significa que afecta a cualquier nodo hijo.
Puntos clave:
- No hay ningún símbolo, solo se utiliza un espacio entre padres e hijos.
- Es un selector CSS muy común.
Ejemplo:
Seleccione todos los elementos del párrafo dentro de un contenedor y agrégueles color rojo.
Selector de CSS secundario directo
El selector CSS del combinador secundario selecciona todos los hijos directos especificados del padre.
Puntos clave:
- El símbolo mayor ( > ) se utiliza para seleccionar los hijos directos.
- Es un selector CSS muy raro pero necesario.
Ejemplo:
Agregue color de fondo solo a aquellos elementos de botón que son hijos directos de .container
Selector de hermanos adyacentes
El selector de hermanos adyacente selecciona todos los hermanos que están uno al lado del otro en la misma línea.
Puntos clave:
- Contiene el signo ' + '.
- Los desarrolladores lo utilizan para muchos casos de uso.
- Por orden de llegada, selecciona el primer elemento que viene después del hermano.
Ejemplo:
Agregar pantalla: ninguna; a la propiedad de todos los elementos de tramo directo (primeros) que están al lado de los elementos div
Selector general de hermanos
Todos los elementos que son hermanos próximos del elemento especificado son seleccionados por el selector de hermanos general.
Puntos clave:
- Contiene el signo ' ~ '.
- Selecciona todos los siguientes hermanos del elemento especificados.
Ejemplo:
Añadir color: negro; a todos los siguientes hermanos especificados (p) del elemento (div).
div ~ pag {
de color negro;
}
Selector de atributos
Selecciona los elementos en función de los atributos dados.
Puntos clave:
- Puedes usar corchetes para seleccionar los atributos
- Es un poderoso selector de CSS, los desarrolladores lo usan aplicando condiciones.
- Hay varias condiciones que puede usar inteligentemente con el selector de atributos (=, ~=, ^=, $=, *=, atributo|="valor")
Sintaxis con ejemplos:
Puede utilizar un selector de atributos basado en varias condiciones diferentes y esas condiciones con ejemplos se proporcionan a continuación.
Igual
Agregue color rojo a todos los elementos de anclaje donde href es igual al hash "#"
Contener Restringido
Agregue radio de borde a todos los elementos img donde la etiqueta alt contenga la palabra "círculo"
Nota rápida: un valor debe ser una palabra completa.
Contener Flexible
Agregue 500 px de ancho a todos los elementos img donde la etiqueta alt contenga la palabra "opt"
Nota rápida: no es necesario que un valor sea una palabra completa
Si hay 3 imágenes con etiquetas alt (optimize-img, optimizaimg, optimiza-img). Seleccionará las tres imágenes. Porque cada uno contiene opt .
Empezar con Restringido
Agregue el ancho de 500 px a todos los elementos img donde la etiqueta alt comienza con el valor "optimizar"
Nota rápida: un valor debe ser una palabra completa
si hay 3 imágenes con etiquetas alt (optimize-img, optimizaimg, optimiza-img). Solo seleccionará la primera y tercera imagen. Porque la segunda no es una palabra completa.
Empezar con Flexible
Agregue el radio del borde a todos los elementos img donde la etiqueta alt comienza con el valor "radio"
Nota rápida: no es necesario que un valor sea una palabra completa
Si hay 3 imágenes con etiquetas alt (radio-círculo, radio-círculo, radio-círculo). Seleccionará las tres imágenes. Porque todos comienzan con radio .
Termina con
Agregue el color rojo a todos los párrafos donde el valor del atributo de clase termina con alerta.
Nota rápida: ¡ El valor no tiene que ser una palabra completa!
¡Y si! Eso es todo por los selectores CSS de atributos.
Primer selector infantil
Como sugiere el nombre, selecciona el primer niño de la lista de niños.
Puntos clave:
- :el primer hijo es una pseudoclase
- Los desarrolladores lo usan especialmente para muchos casos (agregando el espacio en la parte superior de la lista)
Ejemplo:
Agregue margen superior en el primer elemento de la lista de categorías.
Selector del último hijo
Como sugiere el nombre, selecciona el último niño de la lista de niños.
Puntos clave:
- :last-child es una pseudoclase
- Los desarrolladores lo usan especialmente para muchos casos (agregando el espacio al final de la lista)
Ejemplo:
Agregue el borde inferior al final de la lista de categorías (elemento).
Selector de primera letra
Selecciona la primera letra del párrafo.
Puntos clave:
- ::la primera letra es un pseudoelemento
- Es bastante útil para hacer que la primera letra sea mayúscula o grande (como se ve en el periódico).
Ejemplo:
Aumente el tamaño de fuente de la primera letra de cada párrafo.
Selector de primera línea
Al igual que con la primera letra, incluso puedes seleccionar la primera línea de un párrafo.
Ejemplo:
Aumente el peso de la fuente de la primera línea de cada párrafo.
:Selector CSS nth-child(valor)
Similar a :first-child y :last-child, selecciona el elemento según el valor dado.
Puntos clave:
- :nth-child es una pseudoclase
- En un nivel básico, acepta el valor entero.
Ejemplo:
Agregue color de fondo a los quintos hijos de 11 cuadros.
Conclusión
Es fundamental conocer los selectores CSS para que puedas utilizarlos correctamente en tus proyectos.
En este tutorial, aprendiste sobre los selectores CSS más importantes, que verás de vez en cuando. Siempre puedes usarlo como una hoja de trucos integral de selectores CSS.
Selector de CSS extremadamente potente
Antes de continuar, hay un selector CSS basado en condiciones extremadamente poderoso que no mencioné.
No te preocupes, también lo cubro en una guía independiente. Continúe y busque en :not css selector
Asegúrese de compartir esta guía con otras personas y suscríbase a nuestro boletín para obtener más tutoriales rápidos de desarrollo web .
