Un selector de CSS selecciona los elementos HTML que deseas diseñar.
Selectores CSS
Los selectores de CSS se utilizan para «encontrar» (o seleccionar) los elementos HTML que deseamos diseñar.
Podemos dividir los selectores en 5 categorías:
- Selectores simples: seleccionan elementos basados en nombre, id, class…
- Selectores combinadores: seleccionan elementos en función de una relación específica entre ellos
- Selectores de pseudoclase: seleccionan elementos en función de un determinado estado
- Selectores de pseudoelementos: seleccionan y diseñan una parte de un elemento
- Selectores de atributos: seleccionan elementos en función de un atributo o valor de atributo
El selector de elementos CSS
El selector de elementos selecciona elementos HTML en función del nombre del elemento.
Ejm
p {
text-align: center;
color: red;
}
El selector de id
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 id se usa para seleccionar un elemento único. Para seleccionar un elemento con una identificación específica, escribe un carácter hash (#), seguido de la identificación del elemento.
Ejm
#para1 {
text-align: center;
color: red;
}
Nota: Un nombre de id no puede comenzar con un número.
El selector CSS class
El selector class selecciona elementos HTML con un atributo de clase específico. Para seleccionar elementos con una clase específica, escribe un carácter de punto (.), seguido del nombre de la clase.
Ejm
.center {
text-align: center;
color: red;
}
También puedes especificar que solo los elementos HTML específicos se vean afectados por una clase.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Este encabezado no se verá afectado</h1>
<p class="center">Este párrafo se verá alineado al centro</p>
</body>
</html>
Los elementos HTML también pueden referirse a más de una clase.
Ejm
En este ejemplo, el elemento <p> se diseñará de acuerdo con class=»center» y class=»large».
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Este encabezado no será afectado</h1>
<p class="center">Este párrafo será rojo y alineado al centro</p>
<p class="center large">Este párrafo será rojo, alineado alcentro
y con un tamaño large.</p>
</body>
</html>
Nota: Un nombre de clase no puede comenzar con un número.
El selector CSS universal
El selector universal (*) selecciona todos los elementos HTML de la página.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hola Mundo!</h1>
<p>Cada elemento en la página será afectado por el estilo.</p>
<p id="para1">Este párrafo se verá afectado</p>
<p>Este otro también</p>
</body>
</html>
El selector de agrupación CSS
El selector de agrupación selecciona todos los elementos HTML con las mismas definiciones de estilo. Mira el siguiente código CSS (los elementos h1, h2 y p tienen las mismas definiciones de estilo).
Ejm
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Lo mejor es agrupar los selectores, para minimizar el código. Para agrupar selectores, separa cada selector con una coma.
Ejm
<!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>
Todos los selectores simples
| Selector |
Ejemplo |
Descripción del ejemplo |
| #id |
#firstname |
Selecciona el elemento con la id=»firstname» |
| .class |
.intro |
Selecciona todos los elementos con class=»intro» |
| element.class |
p.intro |
Selecciona sólo los elementos <p> con class=»intro» |
| * |
* |
Selecciona todos los elementos |
| element |
p |
Selecciona los elementos <p> |
| element,element,.. |
div, p |
Selecciona todos los elementos <div> y todos los elementos <p> |