Un selector de CSS selecciona los elementos HTML con fines de estilo. Los selectores de CSS seleccionan elementos HTML según su id, clase, tipo, atributo, etc.
Hay muchos tipos básicos diferentes de selectores.
- Selector de elementos
- Selector de identificación
- Selector de clase
- selector universal
- Selector de grupo
- Selector de atributos
Código HTML: considere el código de muestra para comprender mejor los selectores y sus usos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1> Sample Heading </h1> <p> Geeks for Geeks is a computer science portal for geeks and computer enthusiasts. Geeks for geeks provide a variety of services for you to learn, thrive and also, have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <div id="div-container"> Geeks for geeks is a computer science portal for geeks and computer enthusiast. Geeks for geeks provide a variety of services for you to learn, thrive and also, have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </div> <p class="paragraph-class"> Geeks for geeks is a computer science portal for geeks and computer enthusiast. Geeks for geeks provide a variety of services for you to learn, thrive and also, have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <a href="#">Learn HTML</a> <a href="#">Learn CSS</a> <a href="#">Learn Javascript</a> </body> </html>
Aplicaremos reglas CSS al código HTML anterior.
1. Selector de elementos: el selector de elementos selecciona elementos HTML en función del nombre del elemento (o etiqueta), por ejemplo, p, h1, div, span, etc.
style.css: el siguiente código se usa en el código HTML anterior. Puede ver las reglas CSS aplicadas a todas las etiquetas <p> y etiquetas <h1>.
h1 {
color: red;
font-size: 3rem;
}
p {
color: white;
background-color: gray;
}
Producción:
2. Selector de ID: el selector de ID utiliza el atributo de ID de un elemento HTML para seleccionar un elemento específico.
Nota: una identificación de elemento es única en una página para usar el selector de identificación .
style.css: el siguiente código se usa en el código HTML anterior usando el selector de ID.
#div-container{
color: blue;
background-color: gray;
}
Producción:
La siguiente regla CSS se aplicará al elemento HTML con id=”div-container”:
3. Selector de clase: el selector de clase selecciona elementos HTML con un atributo de clase específico.
style.css: el siguiente código se usa en el código HTML anterior usando el selector de clase. Para usar el selector de clases, debe usar ( . ) seguido del nombre de la clase en CSS. Esta regla se aplicará al elemento HTML con el atributo de clase » clase de párrafo «
.paragraph-class {
color:white;
font-family: monospace;
background-color: purple;
}
Producción:
4. Selector universal: El selector universal (*) en CSS se usa para seleccionar todos los elementos en un documento HTML. También incluye otros elementos que están dentro debajo de otro elemento.
style.css: el siguiente código se usa en el código HTML anterior usando el selector universal. Esta regla CSS se aplicará a todos y cada uno de los elementos HTML de la página:
* {
color: white;
background-color: black;
}
Producción:
5. Selector de grupo: este selector se utiliza para diseñar todos los elementos separados por comas con el mismo estilo.
style.css: el siguiente código se usa en el código HTML anterior usando el selector de grupo. Suponga que desea aplicar estilos comunes a diferentes selectores, en lugar de escribir reglas por separado, puede escribirlas en grupos como se muestra a continuación.
#div-container, .paragraph-class, h1{
color: white;
background-color: purple;
font-family: monospace;
}
Producción:
6. Selector de atributos: el selector de atributos [atributo] se utiliza para seleccionar los elementos con un atributo específico o un valor de atributo.
style.css: el siguiente código se usa en el código HTML anterior usando el selector de atributos. Esta regla CSS se aplicará a todos y cada uno de los elementos HTML de la página:
[href] { background-color: lightgreen;
color: black;
font-family: monospace;
font-size: 1rem;
}
Producción:
