Tabla de contenidos
3. Selectores
Como hemos visto anteriormente, los selectores nos ayudan a indicar el elemento sobre el que se van a aplicar los estilos. 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*/
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) |
En la próxima unidad profundizaremos más sobre este tema y conoceremos los selectores de atributos.
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*/
0