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.
Sintaxis: * { atributo:valor; }
Ejemplo:* { color: grey; }
/* El estilo se aplicará a todos los elementos de la página*/
Sintaxis: etiqueta { atributo:valor }
Ejemplo: p {color: green;}
/* El estilo se aplicará a todos los elementos <p>.*/
Sintaxis: .clase { atributo:valor }
Ejemplo: .blend{color: red;}
/* El estilo se aplicará a cualquier elemento que tenga la clase .blend */
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 */
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 */
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 */
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 */
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 */
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.
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