Introducción a los tipos de selectores CSS
Los tipos de selectores CSS se utilizan para elegir el contenido que queremos diseñar. Ayuda a seleccionar elementos basados en su clase, id, tipo, etc. Un selector de CSS es un componente del conjunto de reglas CSS.
Tipos de selectores CSS
Hay 5 variedades de selectores CSS disponibles para nosotros. Examinaremos los siguientes selectores CSS importantes:
- Selector universal de CSS.
- Selector de elementos CSS.
- CSS Id Selector.
- Selector de clase CSS.
- Selector de atributos CSS.
1. Selector universal CSS
En una página HTML, el contenido depende de las etiquetas HTML. Un par de etiquetas define un elemento de página web específico. El selector universal CSS selecciona todos los elementos en una página web.
Ejemplo:
* (
color: blue;
font-size: 21px;
)
Estas dos líneas de código rodeadas por las llaves afectarán a todos los elementos presentes en la página HTML. Declaramos un selector universal con la ayuda de un asterisco al comienzo de la llave. Universal Selector se puede usar junto con los otros selectores en combinación.
2. Selector de elementos CSS
CSS Element Selector también se conoce como selector de tipo. El selector de elementos en CSS intenta hacer coincidir los elementos HTML que tienen el mismo nombre. Por lo tanto, un selector de
- coincide con todos los
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- Preguntas de entrevista CSS
- SASS vs SCSS
- Preguntas de la entrevista de SASS
- Ejemplos de lista ordenada HTML
- elementos, es decir, todas las listas desordenadas en esa página HTML.
Veamos un ejemplo para el selector de elementos.
ul (
border: solid 1px #ccc;
)
Para entender esto mejor, veamos un ejemplo de código HTML para aplicar el código CSS que hemos escrito anteriormente.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Texto de demostración
En este ejemplo, encontraremos principalmente tres elementos, a saber, el
- elemento, la etiqueta y otro
- elemento. Dado que nuestro código CSS se aplica a
- etiqueta específicamente, los cambios en el borde se realizarán solo para nuestro
- etiquetas, y no para las etiquetas. Por lo general, estos cambios no se aplican al contenido de
- etiquetas también, pero en algunos escenarios, los estilos pueden aplicarse a los elementos internos.
3. Selector de ID de CSS
El selector de ID de CSS ayuda al desarrollador a hacer coincidir la ID creada por el desarrollador con su contenido de estilo. El selector de ID se usa con la ayuda del signo hash (#) antes del nombre de ID declarado por el desarrollador. El selector de ID coincide con cada elemento HTML que tiene un atributo de ID con el mismo valor que el del selector, sin el signo hash.
Aquí hay un ejemplo:
#box (
width: 90px;
margin: 10px;
)
Este código CSS se puede usar para hacer coincidir el elemento que tiene la id 'caja', como en la siguiente oración.
Aquí, la etiqueta es solo un ejemplo. Podemos escribir el atributo ID para cualquier etiqueta HTML. El selector de ID coincide con el atributo de ID dentro del elemento y busca su estilo. En nuestro ejemplo, el estilo se aplica siempre y cuando cualquier elemento contenga el atributo ID 'box'.
Se supone que el valor de la ID que se utiliza es único. Si se usa la misma ID para dos o más elementos, el código es técnicamente inválido, pero el estilo del elemento aún se aplicará, por lo que generalmente se evita tener la misma ID.
Tener que usar una identificación diferente cada vez para cada página HTML, es bastante rígido. Además de enfrentar problemas de rigidez, los selectores de ID en CSS también enfrentan el problema de la especificidad.
4. Selector de clase CSS
El selector de clase CSS es uno de los selectores más útiles de todos los selectores. Se declara utilizando un punto seguido del nombre de la clase. El codificador define este nombre de clase, como es el caso con el selector de ID. El selector de clase busca cada elemento que tenga un valor de atributo con el mismo nombre que el nombre de la clase, sin el punto.
Ejemplo:
.square (
margin: 20px;
width: 20px;
)
Este código CSS se puede usar para hacer coincidir el elemento que tiene el cuadrado de la clase, como en la siguiente oración.
Este estilo también se aplica a todos los demás elementos HTML que tienen un valor de atributo para la clase como 'cuadrado'. Un elemento que tenga el mismo valor de atributo de clase nos ayuda a reutilizar los estilos y evita repeticiones innecesarias. Además, el selector de clase es beneficioso porque nos permite agregar varias clases a un elemento en particular. Podemos agregar más de una clase al atributo separando cada clase con espacio.
Ejemplo:
Aquí, cuadrado, negrita y forma son tres tipos diferentes de clases.
5. Selector de atributos CSS
El selector de Atributo CSS aplica estilos al contenido de acuerdo con el atributo y el valor del atributo mencionado entre corchetes. No puede haber espacios delante del corchete de apertura.
input(type="text") (
background-color: #fff;
width: 100px;
)
Este código CSS coincidiría con el siguiente elemento HTML.
De manera similar, si el valor del atributo 'tipo' cambia, el selector de Atributo no coincidiría. Por ejemplo, el selector no coincidiría con el atributo si el valor de 'tipo' cambiara de 'texto' a 'enviar'. Si el selector de atributos se declara solo con el atributo y sin valor de atributo, entonces coincidirá con todos los elementos HTML con el atributo 'tipo', independientemente de si el valor es 'texto' o 'enviar'.
Ejemplo:
input(type) (
background-color: #fff;
width: 100px;
)
También podemos hacer uso de selectores de atributos sin especificación de un valor fuera de los corchetes. Esto nos ayudará a apuntar solo al atributo, independientemente del elemento. En nuestro ejemplo, se orientará en función del atributo 'tipo', independientemente del elemento 'input'. Los selectores CSS nos ayudan a simplificar nuestro código y nos permiten utilizar y reutilizar el mismo código CSS para varios elementos HTML. Nos ayudan a diseñar segmentos y porciones específicos de nuestra página web. Nos brindan la opción de diseñar de manera uniforme elementos similares en nuestra página web. Los selectores de CSS son, por lo tanto, una parte importante de la curva de aprendizaje de CSS.
Artículos recomendados
Esta ha sido una guía de Tipos de selectores CSS. Aquí hemos discutido los diferentes tipos de selectores CSS con ejemplo. También puede consultar nuestros otros artículos sugeridos para obtener más información: