Un selector CSS selecciona los elementos HTML que quiero estilizar.
Los selectores CSS se utilizan para "buscar" (o seleccionar) los elementos HTML que quiero estilizar.
Podemos dividir los selectores CSS en cinco categorías:
Selectores simples (seleccione elementos según el nombre, identificación, clase)
Selectores combinadores (seleccione elementos basados en una relación específica entre ellos)
Selectores de pseudoclase (seleccionan elementos según un determinado estado)
Selectores de pseudoelementos (seleccionar y diseñar una parte de un elemento)
Selectores de atributos (seleccione elementos según un atributo o valor de atributo)
Esta página explicará los selectores CSS más básicos.
El selector de elementos selecciona elementos HTML según el nombre del elemento.
Aquí, todos los elementos <p> de la página serán alineado al centro, con un color de texto rojo:
p
{
text-align: center;
color: red;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
El selector de identificación utiliza el atributo de identificación 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 es solía hacerlo ¡selecciona 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.
La siguiente regla CSS se aplicará al elemento HTML con id="para1":
#para1
{
text-align: center;
color: red;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Nota: ¡Un nombre de identificación no puede comenzar con un número!
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.
En este ejemplo, todos los elementos HTML con class="center" serán rojos y estarán alineados en el centro:
.center {
text-align: center;
color: red;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
También puede especificar que una clase solo deba afectar a elementos HTML específicos.
En este ejemplo sólo se utilizarán los elementos <p> con class="center". rojo y alineado al centro:
p.center {
text-align: center;
color: red;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
elementos HTML También puede referirse a más de una clase.
En este ejemplo, el estilo del elemento <p> se ajustará a class="center" y a class="grande":
<p class="center large">This paragraph refers to two classes.</p>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Nota: ¡El nombre de una clase no puede comenzar con un número!
El selector universal (*) selecciona todo HTML elementos en la página.
La siguiente regla CSS afectará a todos los elementos HTML de la página:
*
{
text-align: center;
color: blue;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
El selector de agrupación selecciona todos los elementos HTML con el mismo estilo. definiciones.
Mire el siguiente código CSS (los elementos h1, h2 y p tienen el mismo 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.
En este ejemplo hemos agrupado los selectores del código anterior:
h1, h2, p
{
text-align: center;
color: red;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Selector:
#id
Ejemplo:
#firstname
Descripción de ejemplo: Selecciona el elemento con id="firstname"
Selector:
.class
Ejemplo:
.intro
Descripción de ejemplo: Selecciona todos los elementos con class="intro"
Selector:
element.class
Ejemplo:
p.intro
Descripción de ejemplo: Selecciona solo elementos <p> con class="intro"
Selector:
*
Ejemplo:
*
Descripción de ejemplo: Selecciona todos los elementos
Selector:
element
Ejemplo:
p
Descripción de ejemplo: Selecciona todos los elementos <p>
Selector:
element,element,..
Ejemplo:
div, p
Descripción de ejemplo: Selecciona todos los elementos <div> y todos los elementos <p>