Selectores CSS

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.

📄

Empezar

TIPOS DE SELECTORES

04

01

Selector Universal

Selector Identificador

05

02

Selector Descendiente

Selector Etiqueta

06

03

Combinacion de Selectores

Selector clase

TIPOS DE SELECTORES

08

07

Selector Adyacente

Selector de hijos

Resumen de selectores basicos

+info

📄

Elaborado por Mstra. Adriana Vzla

Selector Universal

Sintaxis: * { atributo:valor; }

📄

Ejemplo: * { color: grey; } /* El estilo se aplicará a todos los elementos de la página*/

Empezar

Selector Etiqueta

Sintaxis: etiqueta { atributo:valor }

📄

Ejemplo: p {color: green;} /* El estilo se aplicará a todos los elementos <p>.*/

Empezar

Selector Clase

Sintaxis: .clase { atributo:valor }

📄

Ejemplo: .blend{color: red;} /* El estilo se aplicará a cualquier elemento que tenga la clase .blend */

Empezar

Selector Identificador

Sintaxis: #id { atributo:valor }

📄

Ejemplo: #cent {color: blue;} /* El estilo se aplicará al elemento que tenga el id #cent */

Empezar

Selector descendiente

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 */

Empezar

Combinacion de selectores

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 */

Empezar

Selector de hijos

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 */

Empezar

Selector adyacente

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 */

Empezar

¡Ojo! En Genially utilizamos AI (Awesome Interactivity) en todos nuestros diseños, para que subas de nivel con interactividad y conviertas tu contenido en algo que aporta valor y engancha.