Tipos de selectores en CSS

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 */
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 */
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 |
.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 |
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 */ 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
0
Test