Como hemos visto anteriormente, los selectores nos ayudan a indicar el elemento sobre el que se van a aplicar los estilos. Los selectores pueden apuntar a elementos específicos, clases, identificadores o incluso atributos de un elemento.
3. Selectores
Existen muchos tipos de selectores y algunos de los más destacados son los que se detallan a continuación.
3.1. Selector universal
Sintaxis: * { atributo:valor; }
Ejemplo: * { color: grey; }/* El estilo se aplicará a todos los elementos de la página*/
El selector universal (*) es útil cuando deseas aplicar un estilo a todos los elementos en una página web sin excepción. Es una forma rápida y sencilla de establecer reglas generales que afectarán a todos los elementos en el documento. Por ejemplo, si deseas eliminar todos los márgenes y rellenos predeterminados de los elementos en tu página para empezar desde cero, puedes usar el selector universal para restablecerlos.
3.2. Selector etiqueta
Sintaxis: etiqueta { atributo:valor }
Ejemplo: p {color: green;} /* El estilo se aplicará a todos los elementos <p>.*/
3.3. Selector clase
Sintaxis: .clase { atributo:valor }
Ejemplo: .blend{color: red;} /* El estilo se aplicará a cualquier elemento que tenga la clase .blend */
Un elemento puede tener múltiples clases: <div class="blend otro-estilo"></div>
En este ejemplo, el elemento <div> tendrá los estilos definidos para ambas clases .blend y .otro-estilo. Sin embargo, si hay propiedades CSS que se repiten en ambas clases, se aplicarán los estilos de la última clase declarada. Es decir, si tanto .blend como .otro-estilo definen la propiedad color, prevalecerá el color definido en .otro-estilo porque es la última clase definida. Esto proporciona un mecanismo para controlar la prioridad de los estilos cuando se aplican múltiples clases a un elemento.
3.4. Selector identificador
El selector identificador utiliza el atributo id para seleccionar un elemento. Solo puede haber un elemento con un id dado en un documento.
Sintaxis: #id { atributo:valor }
Ejemplo: #cent {color: blue;} /* El estilo se aplicará al elemento que tenga el id #cent */
3.5. Selector descendiente
Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del elemento padre.
Sintaxis: selector1 selector2 selectorN {atributo: valor;} /* El estilo se aplica sobre el selector N */
Ejemplo: div p { color: black;} /* El estilo se aplica a todos los párrafos que se encuentren dentro de una etiqueta div */
3.6. Combinación de selectores
La combinación de selectores nos permite dar un estilo a todos los selectores indicados.
Sintaxis: selector1, selector2, selector3{atributo: valor;} /* El estilo se aplica sobre los selectores indicados */
Ejemplo: div, p { color: orange;} /* El estilo se aplica a todos los divs y párrafos */
3.7. Selector de hijos
Se usa para seleccionar un elemento que es hijo de otro elemento.
Sintaxis: selector1 > selector2 {atributo: valor;} /* El estilo se aplica sobre el selector 2 */
Ejemplo: div > p { color: white;} /* El estilo se aplica a todos los párrafos que sean hijos de un div */
Diferencia entre selector de hijos y selector descendiente. Los hijos son los elementos que se encuentran un nivel directamente debajo de el mismo elemento section. Los descendientes son todos los elementos que se encuentran dentro del elemento section sean los mismos hijos o los hijos de los hijos.
3.8. Selector adyacente
Se usa para seleccionar elementos que son hermanos, es decir, su elemento padre es el mismo y están seguidos en el código HTML.
Sintaxis: selector1 + selector2{ atributo: valor; } /* El estilo se aplica al selector 2 */
Ejemplo: div + p { color: black;} /* El estilo se aplica a todos los párrafos que sean hermanos de un div */
3.9. Resumen de selectores básicos
| Selector | Descripción |
| * | Selecciona todos los elementos del DOM |
| etiqueta | Selecciona todas las etiquetas indicadas |
| .class | Selección de los elementos con la clase .class |
| #id | Selección del elemento con id #id |
| sel1 sel2 | Selección de los selectores sel2 que se encuentren dentro de los selectores sel1 (pueden ser hijos de hijos) |
| .class1.class2 | Selección de los elementos con las dos clases: class1 y class2 |
| sel1.class1 | Selección de todos los selectores sel1 con clase class1 |
| sel1, sel2 | Selección de todos los selectores separados por comas |
| sel1 > sel2 | Selección de los selectores sel2 cuando son hijos de sel1 (no pueden ser hijos de hijos) |
| sel1 + sel2 | Selección del selector sel2 cuando es hermano de sel1 (su elemento padre es el mismo) |
Estos son solo algunos selectores básicos, en la próxima unidad profundizaremos más sobre este tema y conoceremos los selectores de atributos.
3.10. Ejemplos
p { background-color: grey; } /* Selector etiqueta */
.clase { color: red; } /* Selector clase */
#ident { color: green; } /* Selector Identificador */
* { font-style: italic; } /* Selector universal */
p a { background-color: orange; } /* Selector descendiente (pueden ser hijos de hijos) */
h3, small { color: blue;} /* Combinación de selectores */
div>span { color: pink; } /* Selector de hijos */
span+small { background-color: yellow; } /* Selector adyacente*/
Ejemplo en CodePen
Comprueba tu apendizaje