Selectores CSS
Los selectores CSS se utilizan para "encontrar" (o seleccionar) los elementos HTML que desea diseñar.
Podemos dividir los selectores CSS en cinco categorías:
Esta página explicará los selectores CSS más básicos.
¡La identificación de un elemento es única dentro de una página, por lo que el selector de identificación se usa para seleccionar un elemento único!
Para seleccionar un elemento con una identificación específica, escriba un carácter hash (#), seguido de la identificación del elemento.
Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), Seguido del nombre de la clase.
También puede especificar que solo los elementos HTML específicos se vean afectados por una clase.
Los elementos HTML también pueden referirse a más de una clase.
Mire el siguiente código CSS (los elementos h1, h2 y p tienen las mismas definiciones de estilo):
Para agrupar selectores, separe cada selector con una coma.
Podemos dividir los selectores CSS en cinco categorías:
- Selectores simples (seleccione elementos basados en nombre, id, clase)
- Selectores de combinador (seleccione elementos basados en una relación específica entre ellos)
- Selectores de pseudo-clase (seleccione elementos basados en un estado determinado)
- Selectores de pseudoelementos (seleccionar y diseñar una parte de un elemento)
- Selectores de atributos (seleccione elementos basados en un atributo o valor de atributo)
Esta página explicará los selectores CSS más básicos.
El selector de elementos CSS
El selector de elementos selecciona elementos HTML en función del nombre del elemento.Ejemplo
Aquí, todos los elementos <p> de la página estarán alineados al centro, con un color de texto rojo:p {
text-align: center;
color: red;
}
El selector de id. De CSS
El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.¡La identificación de un elemento es única dentro de una página, por lo que el selector de identificación se usa para seleccionar un elemento único!
Para seleccionar un elemento con una identificación específica, escriba un carácter hash (#), seguido de la identificación del elemento.
Ejemplo
La siguiente regla CSS se aplicará al elemento HTML con id = "para1":#para1 {
text-align: center;
color: red;
}
- Nota: ¡ Un nombre de identificación no puede comenzar con un número!
El selector de clase CSS
El selector de clase selecciona elementos HTML con un atributo de clase específico.Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), Seguido del nombre de la clase.
Ejemplo
En este ejemplo, todos los elementos HTML con class = "center" estarán rojos y alineados al centro:.center {
text-align: center;
color: red;
}
También puede especificar que solo los elementos HTML específicos se vean afectados por una clase.
Ejemplo
En este ejemplo, solo los elementos <p> con class = "center" estarán alineados al centro:p.center {
text-align: center;
color: red;
}
Los elementos HTML también pueden referirse a más de una clase.
Ejemplo
En este ejemplo, el elemento <p> se diseñará de acuerdo con class = "center" y class = "large":<p class="center large">This paragraph refers to two classes.</p>
- Nota: ¡ Un nombre de clase no puede comenzar con un número!
El selector universal de CSS
El selector universal (*) selecciona todos los elementos HTML en la página.Ejemplo
La siguiente regla CSS afectará a cada elemento HTML en la página:* {
text-align: center;
color: blue;
}
El selector de agrupación CSS
El selector de agrupación selecciona todos los elementos HTML con las mismas definiciones de estilo.Mire el siguiente código CSS (los elementos h1, h2 y p tienen las mismas definiciones de estilo):
h1 {Será mejor agrupar los selectores para minimizar el código.
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Para agrupar selectores, separe cada selector con una coma.
Ejemplo
En este ejemplo, hemos agrupado los selectores del código anterior:h1, h2, p {
text-align: center;
color: red;
}
Todos los selectores simples de CSS
| Selector | Example | Example description |
|---|---|---|
| .class | .intro | Selects all elements with class="intro" |
| #id | #firstname | Selects the element with id="firstname" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios