CSS Selectores
Un selector CSS selecciona los elementos HTML a los que desea aplicar estilo.
CSS Selectores
Los selectores CSS se utilizan para "buscar" (o seleccionar) los elementos HTML a los que desea aplicar estilo.
Podemos dividir los selectores CSS en cinco categorías:
- Selectores simples (seleccione elementos según el nombre, identificación, clase)
- Selectores combinadores (selecciona elementos en función de una relación específica entre ellos)
- Selectores de pseudoclase (seleccionan elementos según un determinado estado)
- Selectores de pseudoelementos (selecciona y aplica estilo a una parte de un elemento)
- Selectores de atributos (selecciona elementos según 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 según el nombre del elemento.
Ejemplo
Aquí, todos los elementos <p> de la página estarán alineados al centro, con un color de texto rojo (red):
p {
text-align: center;
color: red;
}
Inténtalo tú mismo »
El selector de identificación 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 almohadilla (#), 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;
}
Inténtalo tú mismo »
Nota: ¡Un nombre de identificación no puede comenzar con un número!
El selector de clases CSS
El selector de clases 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 la class="center" serán rojos y estarán alineados en el centro:
.center {
text-align: center;
color: red;
}
Inténtalo tú mismo »
También puede especificar que solo elementos HTML específicos deben verse afectados por una clase.
Ejemplo
En este ejemplo, solo los elementos <p> con class="center" serán rojos y estarán alineados al centro:
p.center {
text-align: center;
color: red;
}
Inténtalo tú mismo »
Los elementos HTML también pueden hacer referencia a más de una clase.
Ejemplo
En este ejemplo, el estilo del elemento <p> se ajustará a class="center" y a class="large":
<p class="center large">Este párrafo se refiere a dos clases.</p>
Inténtalo tú mismo »
Nota: ¡El nombre de una 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;
}
Inténtalo tú mismo »
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;
}
Inténtalo tú mismo »
Todos los selectores simples de CSS
| Selector | Ejemplo | Ejemplo descripción |
|---|---|---|
| #id | #firstname | Seleccione el elemento con id="firstname" |
| .class | .intro | Selecciona todos los elementos con class="intro" |
| element.class | p.intro | Seleccione solo elementos <p> con class="intro" |
| * | * | Selecciona todos los elementos |
| element | p | Selecciona todos los elementos <p> |
| element,element,.. | div, p | Selecciona todos los elementos <div> y todos los elementos <p> |
CSS — Selectores simples: vídeo de W3Schools
Vídeo que cubre selectores simples como un elemento, ID y clase en CSS.
¡Parte de una serie de tutoriales en vídeo para aprender CSS para principiantes!
