Selectores de CSS

3/42
Recursos
Transcripci贸n

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 鈥渞eset鈥 de estilos.
  • Selector etiqueta. Aplica estilos a todos los elementos de ese tipo (p, h1, header etc.)
  • Selector id. Aplica estilos a un elemento 煤nico con ese Id, se recomienda hacer buen uso de este selector.
  • Selector clase. Aplica estilos a todos los elementos con esa clase (el que m谩s vas a usar).
  • Selector anidado. Aplica estilos a un elementos descendientes de otros elementos (no necesario que sea hijo directo).
  • Selector hijo >. Aplica estilos a los elementos que sean hijos directos de otros.
  • Selector adyacente +. Aplica estilos al elemento adyacente.
  • Selector de atributo input[type=鈥渘umber鈥漖. Aplica estilos al elemento con el atributo especificado.

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.

Aportes 125

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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=鈥榥umber鈥橾 {
border: black;
}
input[type=鈥榚mail鈥橾 {
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. 鈥淧or cada uso de !important muere un oso en el 谩rtico 馃槮鈥)*/

NOTA IMPORTANTE: creo que hizo falta un selector.

El selector se llama 鈥淗ermano general鈥 贸 鈥淕eneral 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 鈥渞eset鈥 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=鈥渘umber鈥漖. 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鈥檚 a special operator you can use in CSS Attribute Selectors

The operator is i, here鈥檚 how it works:

// Case insensitive match
a[title=鈥渉ome鈥 i] {
Will match Home or even HOME
}

// Case sensitive match
a[title=鈥渉ome鈥漖 {
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=鈥渘umber鈥

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 鈥減eso鈥 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 鈥渃lass1鈥 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 鈥渆lement1鈥 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 鈥渃alss3鈥 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 鈥渃lass3鈥.

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

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=鈥榥umber鈥橾

鉂わ笍

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