Selectores CSS: básicos y combinadores

Contenido del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:57

Selectores CSS: básicos y combinadores

Curso de Frontend Developer

Clase 8 de 24

Clase 8 / 24

Recursos

El selector define el elemento o conjunto de elementos HTML a los cuales se añadirán estilos. Existen nombres de colores propios de CSS que puedes explorar. A continuación veamos más sobre selectores.

Cuáles son los selectores básicos

Un selector básico es la mínima expresión CSS para colocar estilos.

selector {
    /* Estilos */
}

1. Selector de tipo

Selecciona todos los elementos que coincidan con el nombre de la etiqueta HTML.

div {
    /* Todos los div en el documento */
}

Desafío de selector de tipo

Intenta dar un color de fondo a 10 etiquetas <div> con un solo selector, utiliza la propiedad background-color.

2. Selector de clase

Selecciona todos los elementos que coincidan con las etiquetas HTML que contengan el atributo class.

<!--archivo HTML-->
<div class=""card""> Soy una carta </div>

Para seleccionar estos elementos, se empieza por un punto . y seguido el valor exacto del atributo class de la etiqueta. Puede ser cualquier valor que desees colocar.

/* archivo CSS */
.card {
    /* Todas las etiquetas con la clase ""card"" */
}

Puede existir más de un valor dentro del atributo class separados por espacios.

<!--archivo HTML-->
<div class=""card card1""> Soy una carta </div>
<div class=""card card2""> Soy una carta </div>

.card {
    /* Todas las etiquetas con la clase ""card"" */
}

.card1 {
    /* Todas las etiquetas con la clase ""card1"" */
}

.card2 {
    /* Todas las etiquetas con la clase ""card2"" */
}

Desafío de selector de clase

De un conjunto de etiquetas <div> intenta dar un color de fondo a las etiquetas que contengan la clase ""card"" con un solo selector. Después, intenta dar un color de letra diferente para las etiquetas que contengan ""card1"" y ""card2""

3. Selector de identificador único (id)

Selecciona el único elemento que coincida con la etiqueta HTML que contenga el atributo id. Solo puede existir un valor id para todo el documento.

<!--archivo HTML-->
<button id=""eliminar""> Eliminar  </button>

Para seleccionar el elemento, se empieza por el símbolo de hashtag # y seguido el valor exacto del atributo id de la etiqueta. Puede ser cualquier valor que desees colocar.

/* archivo CSS */
#eliminar {
    /* La única etiqueta con el id ""eliminar"" */
}

Desafío de selector de ID

De un conjunto de etiquetas <button>, existe un único botón para eliminar. Intenta colocar un color de fondo rojo a este elemento.

4. Selector de atributo

Selecciona los elementos que coincidan con la etiqueta HTML que contenga el atributo y valor especificado.

<!--archivo HTML-->
<a href=""https://platzi.com""> Ir a Platzi </a>

Para seleccionar los elementos, se empieza por el nombre de la etiqueta, seguido de corchetes [] que contiene el atributo y valor especificado.

/* archivo CSS */
a[href=""""https://platzi.com""] {
    /* Todas las etiquetas <a> con una propiedad href con valor ""https://platzi.com"" */
}

Desafío de selector de atributo

Intenta colocar un color de fondo a las etiquetas <a> que contengan el atributo href con el valor de ""https://platzi.com"".

5. Selector universal

Selecciona todos los elementos del documento mediante un asterisco *.

* {
    /* Todos los elementos */
}

Desafío de selector universal

Intenta colocar un color de fondo a todos los elementos del documento.

Cuáles son los selectores combinadores

Un selector combinador es la unión de dos o más selectores básicos.

selector1 selector2 selector3 {
    /* Estilos */
}

1. Combinador de descendientes

Selecciona todos los elementos del selector de la derecha que son hijos del selector de la izquierda, independientemente de la profundidad. Estos selectores están separados por un espacio.

padre hijos {
    /* Todos los hijos del padre */
}

div p{
    /* Todos los hijos <p> de <div>*/
}

.container img{
    /* Todos los hijos <img> de la clase ""container""*/
}

Desafío del combinador de descendientes

Intenta colocar un color de letra a todas las etiquetas <li> que son hijos de la clase ""container"".

2. Combinador de hijo directo

Selecciona todos los elementos del selector de la derecha que son hijos directos del selector de la izquierda. Estos selectores están separados por >.

padre > hijos_directos {
    /* Todos los hijos directos del padre */
}

div > p{
    /* Todos los hijos directos <p> de <div>*/
}

.container > img{
    /* Todos los hijos directos <img> de la clase ""container""*/
}

Desafío de combinador de hijo directo

Intenta colocar un color de letra a todos las etiquetas <p> que son hijos directos de la clase ""container"".

3. Combinador de elemento adyacente

Selecciona todos los elementos del selector de la derecha que están adyacente al selector de la izquierda. Estos selectores están separados por +.

elemento + adyacente {
    /* Elementos adyacentes */
}

div + p{
    /* Todos los <p> adyacentes a <div>*/
}

.container + img{
    /* Todos los <img> adyacentes a la clase ""container""*/
}

Adyacente significa que comparten el mismo padre y está situado inmediatamente hacia abajo de otro elemento. Por ejemplo, en el siguiente código, <div> está adyacente a <h1> y <p> está adyacente a <div>. Sin embargo, <h1> no está adyacente a <div> y <div> no está adyacente a <p>.

<!--archivo HTML -->
<h1>Soy un título </h1>
<div>Soy un div</div>
<p>Soy un párrafo</p>

Desafío de combinador de elemento adyacente

Intenta colocar un color de letra a todos las etiquetas <p> que están adyacente a las etiquetas <div>.

4. Combinador general de hermanos

Selecciona todos los elementos del selector de la derecha que son hermanos del selector de la izquierda. Estos selectores están separados por ~.

elemento ~ hermanos {
    /* Elementos hermanos */
}

div ~ p{
    /* Todos los <p> hermanos de <div>*/
}

.container ~ img{
    /* Todos los <img> hermanos de la clase ""container""*/
}

Hermanos significa que comparten el mismo padre y están situados hacia abajo de otro elemento. Por ejemplo, en el siguiente código, <div> y <p> son hermanos de <h1>, pero <h1> no es hermano de <div> y <p>.

<!--archivo HTML -->
<h1>Soy un título </h1>
<div>Soy un div</div>
<p>Soy un párrafo</p>

Desafío de combinador general de hermanos

Intenta colocar un color de letra a todos las etiquetas <p> que son hermanos de <div>.

Contribución creada por Andrés Guano (Platzi Contributor).

Reynaldo Fuentes Garcia

Hace 5 años

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.

++Selector universal++

Sintaxis: * { atributo:valor; }

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

++Selector etiqueta++

Sintaxis: etiqueta { atributo:valor }

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

++Selector clase++

Sintaxis: .clase { atributo:valor }

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

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

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

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

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

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

Comentarios (306)306 comentarios

Carlos Eduardo Gomez García

Luis Arturo Sangri Espitia

Esteban Blanco Ortuno

Josué Ramírez Hernández

Antonio Rafael Acuña Ballesteros

Paula Andrea Montenegro Martínez

Juan Camilo Valencia Silva

Pedro Alvarado Garcia

Luis Fernando Callisaya Surco

Rolando Mamani Salas

Juan camilo piedrahita londoño

Carlos Alberto Escobedo Moreno

Luis Cabezas

Max Andy Diaz Neyra

Eduardo José Ramirez Sáenz

DARWIN JUAN CARLOS CATUNTA GARCIA

Stiven Jiménez

Hace 4 años

Giuseppe Sebastian García-Cancela Rodriguez

Tania Sosa

Cristian David Merchan Vega

Hugo Alberto Torrent Irrazabal

Jesús Mosquera

cristian gomez

Beder Danilo Casa Condori

Yeison Betancourt

Kendall Espinoza

Eddy Alexis Huaripuma Tejada

Jhoana España Urresty

Cristian Mauricio Cavanzo Arias

Diego Toro Cárdenas

Axel Enrique Galeed Gutierrez

Facundo Esteban Gasco

Ricardo Zamudio Carbajal

Hernán Josué Hernández Lamprea

Leobardo Licona Soto

Porfirio González López

Victor Javier ramos Perea

Maite Villella

Emerson David Cabrera Salas

Omar Alvarado Huerta

Luis Wuilfredo Blanco Delgado

Misael Joel Pérez Vargas

Hace 3 años

Lucas Yañez

Alejandro Abalos

Introducción al desarrollo frontend

Fundamentos de HTML y CSS para Desarrolladores Frontend

¿Qué es HTML?

Motores de Renderizado en Navegadores: Funcionamiento y Etapas

Maquetación con HTML

Anatomía y Estructura de Documentos HTML

HTML Semántico: Mejora la Accesibilidad y SEO de tu Web

Etiquetas HTML esenciales para estructurar una página web

Maquetación con CSS

Anatomía de una Declaración CSS: Selectores y Sintaxis Básica

Selectores CSS: básicos y combinadores

Selectores CSS: Pseudo Clases y Pseudo Elementos

Cascada y Especificidad en CSS: Domina el Orden y Prioridad de Estilos

Tipos de Display en CSS: Inline, Bloque e Inline-Block

Flexbox y CSS Grid: Fundamentos y Aplicaciones Prácticas

Modelo de Caja en CSS: Propiedades y Uso Práctico

Colapso de márgenes en CSS: Bloques, Flexbox y Grid

Tipos de posicionamiento en CSS: Relative, Absolute, Fixed y Sticky

Z-Index y Contexto de Apilamiento en HTML/CSS

Propiedades CSS más utilizadas en diseño web

Diseño responsivo

Unidades de Medida en CSS: Absolutas y Relativas

Creación de Tutoriales para Compartir Conocimientos

Media Queries y Diseño Responsivo en CSS

Arquitecturas en CSS

Arquitecturas CSS: Mejora de Legibilidad y Mantenibilidad del Código

Metodologías de CSS: OOCSS, VEM, SMACS y Atomic Design

Próximos pasos

CSS para Entrevistas y Mundo Laboral

HTML y CSS: Fundamentos Esenciales para Frontend Developer

Selectores CSS: básicos y combinadores

Progreso del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Recursos

Recursos