Selectores de CSS

Resumen de la clase de hoy: salva a un oso polar.

Les comparto mis notas de la clase:

/* Selector universal */
* {
  margin: 0;
  padding: 0;
}

/* Selector de etiqueta */
p {
  color: blue;
}
h1,h2,h3,h4,h5 {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}

/* Selector anidado (Para especificar selectores dentro de otros)*/
span {
  color: black;
}
p span {
  color: red;
}

/* Selector de ID (Debe ser único en HTML, no se puede repetir)*/
#verde {
  color: green;
}

/* Selector de clase (Puede estar presente en varios elementos HTML, es el más usado) */
.verde {
  color: green;
}

/* Selector de hijos (Se aplica para hijos directos) */
p > span {
  color: red;
}
span {
  color: green;
}

/* Selector adyacente (Se aplica si esta seguido del elemento especificado, en este caso se aplica el color rojo al elemento h2 si está después de otro elemento h2 y así sucesivamente se puede sumar más elementos) */
h2 {
  color: black;
}
h2 + h2 {
  color: red;
}

/* Selector de aributos */
input[type='number'] {
  border: black;
}
input[type='email'] {
  border: red;
}

/*
!important = 1000000
ID = 100 puntos
Clase = 10 puntos
Etiqueta = 1 punto
Los puntajes son acumulables
*/


span {
  color: black;
} /* 1 punto*/
h2.especial span {
  color: red;
} /* 12 puntos */
h2#superespecial span {
  color: green;
} /* 102 puntos */


h2.special span {
  color: red;
} /* 12 puntos (Gana) */
.especial span {
  color: black;
} /* 11 puntos */

span {
  color: black !important;
} /* 1000000 puntos (Por buenas prácticas no es recomendable usarlo ya que es muy difícil sobrescribirlo, solo se usa en caso que no se tenga acceso al código CSS y se necesite sobrescribir un valor. "Por cada uso de !important muere un oso en el ártico :(")*/

Salvemos los Osos Polares!

Cada que usas un !important muere un oso polar en el ártico :(

NO MÁS !IMPORTANT

falto el selector ~ (General de hermanos) que es el que en realidad el de selecciona todos los hermanos siguientes al primer selector que cumplan con el selector 2
Ejemplo:
div ~ p {}

❌<p>Parrafo</p>
❌<div>
	❌<p>Parrafo</p>
</div>
✅<p>Parrafo</p>
✅<p>Parrafo</p>
❌<div>
	❌<p>Parrafo</p>
</div>
✅<p>Parrafo</p>

estoy haciendo un repaso para presentar el examen, este curso es mucho mejor que el de sass del otro profesor no mire los otros, este esta muy bien explicado muy buen curso

Polar no quiere que uses !important

Es muy important! que no lo olviden.

Algo muy importante que aprendí con @wakos es que el !important debíera ser usado en caso extremo. Y siempre debes considerar que un !important es por que seguramente estas haciendo algo mal.

Cuantas horas desperdicie por no saber de prioridad en css.
pd. mate muchos ositos polares 🙊

¿Alguien quiere pensar en los osos polares?

Si usas !important, ¡hay tabla!

En ésta clase pude ver cosas que me había tocado inferir de las otras clases. Me hubiera gustado tenerla antes, igualmente, bienvenido el aprendizaje

Una de las mejores explicaciones acerca de los selectores de css

yo ya tres meses estudiando fronted y hasta ahora aprendo muchas cosas importantes

El peso de las selectores se le llama Especificidad

Profesor Wilson Sanchez nadie me habie hecho entender estos conceptos como usted, toda mi admiracion y respeto en su forma de explicar.

Maté a más de 100 osos polares en un proyecto donde no tenía acceso al código 😦💔

Me encanta el énfasis en no usar el important, salvemos osos polares.

/* Selector universal */

• {
  margin: 0;
  padding: 0;
  }

/* Selector de etiqueta */
p {
color: blue;
}
h1,h2,h3,h4,h5 {
font-family: Arial, Helvetica, sans-serif;
color: black;
}

/* Selector anidado (Para especificar selectores dentro de otros)*/
span {
color: black;
}
p span {
color: red;
}

/* Selector de ID (Debe ser único en HTML, no se puede repetir)*/
#verde {
color: green;
}

/* Selector de clase (Puede estar presente en varios elementos HTML, es el más usado) */
.verde {
color: green;
}

/* Selector de hijos (Se aplica para hijos directos) */
p > span {
color: red;
}
span {
color: green;
}

/* Selector adyacente (Se aplica si esta seguido del elemento especificado, en este caso se aplica el color rojo al elemento h2 si está después de otro elemento h2 y así sucesivamente se puede sumar más elementos) */
h2 {
color: black;
}
h2 + h2 {
color: red;
}

/* Selector de aributos /
input[type=‘number’] {
border: black;
}
input[type=‘email’] {
border: red;
}
/
!important = 1000000
ID = 100 puntos
Clase = 10 puntos
Etiqueta = 1 punto
Los puntajes son acumulables
*/

span {
color: black;
} /* 1 punto*/
h2.especial span {
color: red;
} /* 12 puntos /
h2#superespecial span {
color: green;
} / 102 puntos */

h2.special span {
color: red;
} /* 12 puntos (Gana) /
.especial span {
color: black;
} / 11 puntos */

span {
color: black !important;
} /* 1000000 puntos (Por buenas prácticas no es recomendable usarlo ya que es muy difícil sobrescribirlo, solo se usa en caso que no se tenga acceso al código CSS y se necesite sobrescribir un valor. “Por cada uso de !important muere un oso en el ártico 😦”)*/

NOTA IMPORTANTE: creo que hizo falta un selector.

El selector se llama “Hermano general” ó “General Siblings”
*Esto va a aplicar el estilo siempre y cuando exista en la misma línea como hermanos ej:

<
HTML: 
<div>
        <h3>Hola soy yo</h3>
        <p>Soy hermano general</p>
        
        <p>Soy hermano general</p>
        </div>
CSS:
h3 ~ p {
    color: green;
}

> 

Todos los párrafos que existan después del h3 aún así haya un párrafo en una etiqueta h4, esta adquirirá el estilo de verde, ya que, están en la misma línea del h3.

Yo vengo estudiando CSS hace ya un par de años, pero aprender desde 0 siempre es bueno. Grande, Wilson! Gracias!

Selectores de CSS

Los selectores nos sirven para seleccionar los diferentes elementos en una página web y aplicar estilos

Existen los siguientes tipos de selectores:

• Selector universal Sirve para agregar estilos a todos los elementos de la página. Normalmente se utiliza para hacer “reset” de estilos.

*{
		margin:0;
		padding:0
 }

• Selector etiqueta. Aplica estilos a todos los elementos de ese tipo (p, h1, header etc.)

p {
		color:blue;
	}

h2,h2,h3,h4,h5 {
		font-famlily:Arial,Helvetica;
		color:black;
}

• Selector id. Aplica estilos a un elemento único con ese Id, se recomienda hacer buen uso de este selector.

#verde {
color:gree
}

• Selector clase. Aplica estilos a todos los elementos con esa clase (el que más vas a usar).

.verde{
		color:green;
	}

• Selector anidado. Aplica estilos a un elementos descendientes de otros elementos (no necesario que sea hijo directo).

span {
	color:black;
}

p span {
color:red;
}

• Selector hijo >. Aplica estilos a los elementos que sean hijos directos de otros.Para que este se cumpla un elemento tiene que ser hijo directo de otro.

p > span {
	color:red
}

• Selector adyacente +. Aplica estilos al elemento adyacente. Esto se aplica a los elementos siguientes.

h2+h2 {
		color:red;
}

• Selector de atributo input[type=“number”]. Aplica estilos al elemento con el atributo especificado.

input[type='number'] {
	border:black;
}

La prioridad de un selector se determina por la suma de su contenido:

• ID = 100
• Clase = 10
• Etiqueta = 1

A mayor la suma, mayor prioridad.

!important es un valor especial tiene un valor de un millón, nunca lo uses a menos que sea tu única opción como cuando no tienes acceso al código fuente.

Con esta herramienta pueden ver el valor de especificidad de cada selector y su peso: Specificity Calculator
peso de los selectores:

• etiqueta = 1
• clase = 10
• id = 100
  y aquí pueden ver los tipos de selectores, entre otros temas de css: Uniwebsidad
  Ademas de pseudoclases y pseudoelementos: MDN

A manera de referencia, considerando incluso las pseudo-clases y los pseudo-elementos podemos decir que:

!important : 10,000
Estilos en línea: 1,000
ID: 100
Atributo, clase o pseudo-clase: 10
Elementos y pseudo-elementos: 1
Universal: 0

Acá un hilo interesante sobre este tema de @teffcode.

muy buena explicación.

Muy buena definición acerca de los selectores. Habían cosas que no sabia 😉

La mejor explicación de las prioridades de los selectores. Buena profe

Gran clase

muy muy buena la informacion de que tienen peso segun el tipo de selector que sea, muchas gracias, en todos los demas cursos de platzi este es el unico donde nos dicen esto

Cuando creo empezar a salir del agujero del conejo ahora me salen con selectores adyacente, selectores hijos y ademas con muertes de osos polares 😦

Genial, todo muy claro!👌

Entendía el peso de cada selector y a cual le daba prioridad, pero no sabia que dependiendo de cuantos se declaren se acumulan y dan mas importancia 😮, ahora creo entender algunos problemas que tuve en un proyecto por no entender eso xD,

pero ahora ya lo se !

Aprender Css basico en 3clases genial un buen repaso, no conocia los selectores adyacentes y tampoco el selector de atributo. Gracias Wilson.

En CSS existen diferentes niveles de importancia cuando seleccionamos elementos de HTML, CSS gestiona un sistema de prioridad donde cada selector tiene su propio valor de importancia que se puede sumar con los otros selectores.

El sistema de prioridad es el siguiente:

1. !important= 1000000
2. id = 100
3. clase = 10
4. etiqueta = 1

Salven a los Osos Polares!!!

El tema de los pesos no lo sabia, interesante el concepto

➡️Hilo de Twitter de Estefany Aguilar (profesora de Platzi) sobre la especificidad en CSS

pensar que después de todo lo pasado pensé que no entendía nada y me hablaban en chino, entiendo claramente lo que explica el profesor 😍😍y aprendo mas cosas!!! wiii

Este lo aprendí hoy

CSS Tip There’s a special operator you can use in CSS Attribute Selectors

The operator is i, here’s how it works:

// Case insensitive match
a[title=“home” i] {
Will match Home or even HOME
}

// Case sensitive match
a[title=“home”] {
Will only match home
}

Normalmente no comento si no es para aportar algo, pero esta vez no me puedo resistir a comentar que esta clase fue excelente. Que buen profesor!

Nunca eh matado un oso polar gracias a Dios 😄

a Vladimir Putin no le gusta que uses !important

Profe Wilson, lo que tal vez no mencionaste en el tema de prioridades es que la mayor prioridad la tiene el estilo en línea sobre la etiqueta de html antes del id, por ejemplo:

<h1 style="color: red;" id="bg-azul">Titulo</h1>
<style>
    #bg-azul{
          color: blue;
    }	
</style>

Dejo el ejercicio hecho con los tipos de selectores

https://stackblitz.com/edit/web-platform-jf1het?file=styles.css

¿Y si les dijera que hay un uso de !important que los osos polares aprueban?

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Explico: este media query permite colocar reglas específicas con el fin de que respete las configuraciones del usuario en caso de que tenga desactivadas las animaciones en su computador (ya sea por gusto o porque tanta animación afecta su sistema de equilibrio)
.
Nosotros como desarrolladores tenemos dos opciones: O colocamos cada animación dentro del media query prefers-reduced-motion: normal, lo cual está bien si tienes una o dos animaciones pero en un proyecto grande que puede tener 40 o 50 animaciones distintas esto es difícil de escalar.
.
O la opción 2 es crear una regla en el media query prefers-reduced-motion: reduce una sola vez que sobreescriba todas las demás animaciones y es ahí donde entra estas reglas que puse. Al usar el !important respetamos las preferencias del usuario de desactivar animaciones con unas líneas de código y podemos animar el resto de nuestros elementos sin problema.
.
Este snippet de código es aprobado por los osos polares.

¿Resetear o normalizar?

Resetear: borra todo los valores por default que los navegadores agregan.
Normalizar: preservar una variedad de elementos, defaults útiles, corregir bugs e inconsistencias entre navegadores.

les recomiendo esta configuración para normalizar sus estilos
link archivo directo al css acá

En niveles de prioridad existe uno mas que es !important este esta por encima de todos mas sin embargo es una muy mala practica usarlo

Important me ha salvado muchas veces en wordpress auqnue no es lo ideal

Cuando usas bootstrap y necesitas sobreescribir ciertas propiedades se muere un oso polar :_c

excelente clase.

Prioridad

A cada tipo de selector se le da un valor diferente.

• ID = 100
• Clase = 10
• Etiquetas = 1
• !important = 1,000,000

Les comparto mis apuntes, espero que le sierva. 😄

Tipos de selectores

Universal

Este le da estilos a todos los elementos de nuestro HTML.

Es un usado para el reseteo de estilos, ya que cada navegador aplica los estilos que tiene, cada navegador tiene estilos por defecto distintos.

Selector etiqueta, tipo o de elementos

Agregamos un poco más de especificación sobre a que elementos le queremos agregar ciertos estilos.

Selector anidado

Se aplican los estilos al elemento que este dentro de otro, se especifica el padre y al hijo que le queremos agregar los estilos.

Selector ID

Con este somos muchos más precisos para insertar nuestro estilo, se lo implementa usando un #nombre-del-ID.

El ID es único y no lo podemos replicar en otro elemento.

No es buena práctica usarlo.

Selector de clase

Lo usamos agregándole un atributo de clase al elemento HTML que le queremos agregar los estilos y lo usamos agregando un .nombre-de-la-clase.

Este si es reutilizable y es muy buena práctica usarlo.

Selector de hijos

En este tenemos que colocar > entre dos selectores.

Se aplica los estilos solamente a los hijos directos.

Selector Adyacente

Es parecida al selector de hijos, solo que este aplica los elementos que sean hermanos cercanos de cierto selector.

Selector de atributos

Se lo usa mucho cuando trabajamos con formularios.

Tenemos que llamar al selector seguido del atributo que tiene el mismo.

Prioridad de una regla CSS

Para entenderlo, podemos darle valores a los tipos de selectores siendo el ID el que tiene mayor valor. Todos estos valores son acumulables.

Es buena práctica no usar ID en nuestros proyectos.

El valor con mayor prioridad de todos es el !important, usarlo es muy mala práctica, solo usarlo como último recurso.

Contenido relacionado

Curso definitivo de HTML y CSS de Platzi

Apuntes de clase

Especificidad en selectores

Más sobre selectores

Combinadores: Adjacent Siblings (combinators)

Combinadores: General Sibling

Combinadores: Hijo y Descendiente

Muy bueno el sistema de puntuacion 1, 10, 100. Habia estudiado CSS varias veces y nunca me explicaron eso, solo que predominaba la mayor especifidad, pero me habría quitado muchos dolores de cabeza

Los temas tratados en esta clase están muy bien explicados en el curso definitivo de html y css

Super recomendado para los que no lo han tomado 👌👍💻

Baia baia, ahora todo tiene sentido!! (al conocer que el valor de las etiquetas son acumulables)

Breve resumen de selectores

• > Hijo directo

  Siginifica que el elemento que se busca, debe ser un hijo directo del padre, es decir debe estar en el nivel 1 de los nodos

• + Selector adyacente

  Selecciona aquellos elementos que estan JUNTO al elemento inicial

• [ ] Selector de atributos

  Selecciona aquellos elementos que tengan establecidos dicho atributo

Documentación adicional sobre selectores CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

D:
Los osos polares :c
Menos mal nunca he utilizado el !important 😎

selector universal: *
selector de etiqueta: p, h1, etc.
selector de ID: #
selector de clase: .
selector de hijo: p > span:
selector adyacente: h2+h2
selector de atributo: input{type=“number”

prioridades:

1. important
2. ID
3. clase
4. etiqueta

// Especificidad en CSS

// Selector de elemento
h3 { color: red } 0, 0, 0, 1 

 // Clase
.destacado { font-weight: bold;} 0,0,1,0

// # ID Unica
#id { font-size: 2em } 0,1,0,0 

//En linea 
<h3 style = "color:blue";> Mas infor </h3> 1,0,0,0

// !Important se carga a todos los elementos CSS
p{ color: green !important;}  


1) !important (no se debe usar) 
2) Estilos en linea (no se debe usar) 
3) ID (se usa para elementos que no se va a repetir)
4) Clases (son la mejor practica)
5) Selector de Tipo

//De forma logica los selectores de tipo son los menos especificos, siguiendo con los de la clase, ID y por ultimo los mas especificos son en linea

A salvar osos polares.

Los selectores anidados tienen que ver con la especificidad, en resumidas palabras es la manera en que los navegadores deciden que valores aplicar (esto porque algunas propiedades tienen un mayor peso a otras propedidades)

Les dejo un recurso para poder entenderlo mejor
Especificidad

Claro y directo. No usar important

3. Selectores de CSS

Algo primordial y que no deben dejar escapar al aprender CSS es la especificidad, y esto en CSS es lo que te va a hacer doler la cabeza si no la conoces, pues no es tan dificíl, solo debes tener en cuenta que en CSS dependiendo de cómo escribas tu regla, va a tener más prioridad y pues si no tiene la suficiente especificidad, no se ejecutará lo que escribes.

Una manera muy fácil de ver qué regla se va a aplicar, es viendo el “peso” de la regla, poniendo el mouse encima en VsCode, mientras más grande sea el número de especificidad, pues tiene más peso y esa regla es la que se aplicar

Aquí les comparto mi resumen en código de la clase, les comparto primero el archivo HTML y luego el CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Mi web by ArudoPE</title>
</head>
<body>
    <p>Este texto no tiene clase.</p>
    <p>Este texto tiene una <span>frase dentro de un span</span> dentro.</p>
    <div>
        <h2>Este es el primer H2 hijo</h2>
        <p>Este parrafo está a continuación de un h2</p>
        <section>
            <h2>Este es el segundo H2 que es hijo de un section hijo</h2>
        </section>
        <p>Este párrafo no está a continuación de un h2</p>
    </div>
    <p><a href="" target="_blank">Link que abre nueva página en blanco</a></p>
    <p><a href="www.google.com" >Link que lleva a la página de google</a></p>
    <button id="submit-button" type="submit">Enviar</button>
    <div class="box"><span>Esto es un div con la clase "box"</span></div>
</body>
</html>

Código CSS:

/*Selector universal*/
/*Este selector selecciona TODO dentro del archivo CSS*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*Selector de etiqueta*/
/*Aplica solo a la(s) etiqueta(s) descrita(s)*/
p {
    color: red;
    font-weight: bold;
}
/*Selector ID*/
/*Solo aplica al ID que se indicó en el HTML*/
#submit-button {
    background-color: rgb(10, 201, 10);
    border-radius: 4px;
    color: white;
    font-weight: bold;
    padding: 10px;
    margin: 5px 0;
}
/*Selector Clase*/
/*Aplica a uno o más elementos que tengan esta clase en el HTML*/
.box {
    border: 2px solid red;
    margin: 0 5px;
    padding: 5px;
    text-align: center;
}
/*Selector Anidado*/
/*Solo aplica para elementos que estén dentro de otros*/
p span {
    color: green;
}
/*Selector Hijo >*/
/*Solo aplica a los hijos directos de un elemento*/
div > h2 {
    color: blue;
}
/*Selector adyacente*/
/* Aplícale  esta regla de CSS a todas las etiquetas de párrafo
que estén cerca de una etiqueta h2, solo funciona si la etiqueta
p está a continuación (esto es el adjacent sibling)*/
h2 + p {
    color:purple;
}
/*Selector de atributo*/
/*Este selector toma los elementos que tienen un determinado
texto en uno de sus atributos*/
a[target="_blank"] {
    background-color: yellow;
}

Así se ve la página:

Nota: Concuerdo, no hay casi ningún escenario de uso para usar !important, más sucede cuando no conoces sobre especificidad.

Finalmente, yo lo que hago es usar siempre clases, e ir poniendo estilos, cuando quiero poner más peso y asegurarme que se aplique el estilo, pues combino clases con anidamiento, y el último recurso es usar id.

Los id para lo que más te sirve es para usarlo desde JavaScript, por ello debes tener cuidado en que solo se use en un solo elemento dentro de tu página.

importante tener en cuenta la estructura de css

hoy aprendí que debo ser ordenado con mi código :´v

Selectores en css

.

1. Etiqueta. Este tiene un valor de 1, un ejemplo podría ser: p { color: red;}, donde todos los párrafos van a tener un color rojo.
2. Clase. Este tiene un peso de 10, un ejemplo podría ser: .class1 { color: pink;} donde todos los elementos con la clase “class1” van a tener un color de rosa. El mas recomendable.
3. Id. Este tiene un peso de 100, un ejemplo de este puede ser: #element1 { color: blue;} donde solo el elemento con el id único “element1” se le va a aplicar este estilo. Si hay mas de 2 elementos con el mismo id, se cancela la acción. No recomendable.
4. Important!. Este tiene una mayor prioridad que los anteriores ya mencionados. Un ejemplo puede ser: .class2 { color: green important!;}. Nada recomendable, si lo usas habrás matado a un oso polar.
5. Anidados. Estos solo indican a una etiqueta o una clase dentro de otra, un ejemplo puede ser: .class3 p { color: white;} en donde a todos los párrafos dentro de los elementos con la clase “calss3” van a tener un color blanco.
6. Hijo directo. Estos solo aplican con los hijos directos de un elemento. Si no es hijo directo, no se aplicara el estilo, un ejemplo puede ser: .class3 > span { border: black;} en donde solo se le aplicara a los <span> que sean hijos directos de los elementos con la clase “class3”.

Comparto la lista de recursos que utilizo cuando tengo dudas sobre cómo utilizar un selector o para entender por qué no funciona esperaba.

• Documentación de MDN.
• Indice de Selectores CSS de css-tricks.
• Cheat sheets de Web Dev Simplified (Es gratis, pero te pide suscribirte al newsletter para enviarte los PDFs por mail).

P > spam { // selector hijo directo
}
h2 + h2 { // selector Adyacente, el elemento debe estar seguido del otro elemento
}

Input[type=´number´]{ // selector de Atributos
}
Input[type=´email´]{
}

KEEP CALM AND ADD A CLASS.

Aqui hay una calculadora de especificidad:
https://specificity.keegan.st/

S.O.S Osos polares!

Que risa lo del oso polar, desconocía esto. Buen resumen.

Ahora sí, a lo que vinimos.

Para saber CSS antes hay que salvar un Oso Polar
no?
Creo que estoy entendiendo el curso

Hola!!
Hacer este juego varias veces me ha sido muy útil para mejorar mis habilidades en selectores CSS y enseñarlos igual… Es mas lo uso como documentación muchas veces!! 😄

CSS DINER

Cuando entiendan la analogía del juego y pasen este juego sin problemas, serán muy fuertes en selectores CSS

En la parte de selector de atributos, falta una comilla en la parte de CSS segundo imput de email, ¿cierto?

uyyyy lo de la prioridad es espectaculaar

🤯 Muy buena explicación 💚

El trozo del video del selector ID se duplicó?

!important = 100% en wordpress :v

Ayuda mucho, para reforzar conocimiento.

Interesante no conocía el selector de atributos input[type=‘number’]

❤️

no quiero que muera un oso polar ajajajaaj

Muy buena metodología de explicación de cómo lee el navegador las etiquetas mediante su valor.

Salvemos a los Osos Polares! x2

Osos polares asesinados por mi: ¡0!

Muy buena documentacion y la explicacion esta excelente.

Muy interesante los tipos de selectores.

Tiene mucha razón. Me ha pasado con lo del peso, fui muy especifico, para definir estilo a un elemnto con varias clases .banner_img-container .banner_img-container img, cuando quería hacer responsive design, quería ahorrarme el tecleo y escribí .banner_img-container img sin la otra clase, jajaja nunca cambio de estilo hasta que fui explicito y agregue la primera clase.

Wuaoooooo no sabía eso de los pesos ahroa comprendo porque aveces algo pisaba a otro!

Excelente, justamente necesitaba una clase asi de CSS!

Muy claro todo, este curso va muy bien!

Excelente explicación y resumen, muchas gracias…🚀

Interesante ver las prioridades de los selectores de acuerdo a su composición.

excelente explicacion