Un selector CSS selecciona los elementos HTML que quieres estilizar/diseñar.
Selectores CSS
Los selectores CSS se utilizan para encontrar y/o seleccionar los elementos HTML que se desea diseñar.
Podemos dividir los selectores CSS en cinco categorías:
Selectores simples (selecciona elementos basados en el nombre, id o clase)
Selectores combinados (selecciona elementos en función de una relación específica entre ellos)
Selectores de pseudoclase (selecciona elementos en función de un determinado estado)
Selectores de pseudoelementos (selecciona y diseña una parte de un elemento)
Selectores de atributos (selecciona elementos en función de un atributo o valor del atributo)
Esta unidad explicará los selectores CSS más básicos.
Selector tipo elemento
El selector tipo elemento selecciona elementos HTML en función del nombre del elemento.
Ejemplo:
Aquí, todos los elementos <p> en la página estarán centrados y alineados, con un color de texto rojo.
p {
text-align: center;
color: blue;
}
Selector tipo id
El selector tipo id usa el atributo id de un elemento HTML para seleccionar un elemento específico.
El id de un elemento es único dentro de una página, por lo que el selector tipo id se utiliza para seleccionar un elemento único.
Para seleccionar un elemento con un id específico, escribe un caracter # seguido del id del elemento.
Ejemplo:
La siguiente regla CSS se aplicará al elemento HTML con id="para1".
#para1 {
text-align: center;
color: red;
}
Nota: un nombre
idno puede comenzar con un número.
Selector tipo class
El selector tipo class selecciona elementos HTML con un atributo de clase específico.
Para seleccionar elementos con una clase específica, escribe un punto (.), seguido del nombre de la clase.
Ejemplo:
En este ejemplo, todos los elementos HTML con la clase class="center" serán de color rojo y alineados al centro:
.center {
text-align: center;
color: red;
}
También puedes especificar elementos HTML específicos sean afectados por una clase.
Ejemplo:
En este ejemplo, solo los elementos <p> con la clase class="center" serán de color 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> será estilizado de acuerdo a la clase class="center" y la clase class="large".
<p class="center large">Este párrafo hace referencia a dos clases.</p>
Nota: un nombre de clase no puede comenzar con un número.
Selector universal
El selector universal (*) selecciona todos los elementos HTML en una página.
Ejemplo:
La siguiente regla CSS afectará a todos los elementos HTML de la página:
* {
text-align: center;
color: blue;
}
Selector de agrupación
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
| Selector | Ejemplo | Descripción |
#id | #firstname | Selecciona el elemento con id id="firstname" |
.class | .intro | Selecciona todos los elementos con la clase class="intro" |
element.class | p.intro | Selecciona solo los elementos <p> con la clase 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> |
Resumen
Los selectores CSS se utilizan para seleccionar elementos HTML y aplicarles estilos. Los selectores se dividen en cinco categorías: simples, combinados, de pseudoclase, de pseudoelementos y de atributos. Los selectores más básicos incluyen el selector de tipo elemento, el selector de id, el selector de clase, el selector universal y el selector de agrupación.
Traducido con 💚 desde W3Schools.com