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