Selectores de CSS
Un selector de CSS selecciona los elementos HTML que desea diseñar.
Selectores de CSS
Los selectores de CSS se utilizan para "encontrar" (o seleccionar) los elementos HTML que desea diseñar.
Podemos dividir los selectores de CSS en cinco categorías:
- Selectores simples (seleccionar elementos basados en nombre, id, clase)
- Selectores combinadores (seleccionar elementos en función de una relación específica entre ellos)
- Selectores de pseudoclase (seleccionar elementos en función de un determinado estado)
- Selectores de pseudoelementos (seleccionar y diseñar una parte de un elemento)
- Selectores de atributos (seleccionar elementos en función de un atributo o valor de atributo)
Esta página explicará los selectores de 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> en 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 usa 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 clases 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 en rojo 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 en rojo y 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 de la página.
Ejemplo
La siguiente regla CSS afectará a todos los elementos HTML de 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
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Será mejor agrupar los selectores, para minimizar el código.
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 |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |