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

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

¿Alguien quiere pensar en los osos polares?

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.

Una de las mejores explicaciones acerca de los selectores de css

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

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

El peso de las selectores se le llama Especificidad

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

Es muy important! que no lo olviden.

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 !

Muy interesante el selector adyacente

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

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”.

¿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.

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).

Si usas !important, ¡hay tabla!

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

Los dos últimos selectores no los conocía. Excelente repaso en CSS!

!important, SALVA UN OSO POLAR.

Por alguna razón esa explicación me dejo más claro algunos conceptos.

Mas que todo el important yo lo utilizaba en sitios web hechos con wordpress ya que a la hora de personalizar el wordpress era muy limitado y era muy tedioso entrar a los archivos de wordpress y editar los .css

genial saber lo de prioridades, a tenerlo en cuenta

no sabia de los valores de id clases y eqtique que util informacion 👍
jajajjajajja osos polares 😂😂

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.

Si sabes usar BIEN los selectores de clases, Jamás tendrás que lidiar con la especificidad. Ya que eso es algo que debe calcular el navegador. NO TU

Definitivamente hay personas que nacieron para enseñar,sumar los selectores de esa manera es mas facil,he visto muchos videos explicando esto y nunca lo habian explicado tan facil

/* 

Selectores:

Es la parte del html al que tu le declaras el estilo


Selector universal (*)

Ejemplo 

* {
    margin:0;
    padding:0;
}

Funciona para resetar el estilo que trae por defecto el nevagador


____________________________________


Selector de etiqueta o elementos (Etiquetas HTML)

Ejemplo: 

h1,h2,h3{
    font-family: Arial, Helvetica;
    color: black
}

Se delcaran los elemementos a los que se les quiere declarar un o los estilos

_________________________________


Selector anidado  (span, P)

El selector tiene que estar adentro de otro elemento por ejemplo:

Una etiqueta span dentro de una P 

<p> <span>  </span> </p>

Ejemplo

p span {
    color: blue;
}

________________________________

Selector de Id (#)

Seleciona el elemtento con el identificador unico selecionado

<p id="p"> <span>  </span> </p>

#p {
    color: blue;
}


_______________________________


Selector de hijos (>)(<)

Se llama con el signo de mayor o menor que, para poder que funcione el elemento tiene que ser hijo del elemento declarado


______________________________


Selector adyacente (+)

Para poder que funcione el elemento tiene que estar seguido

OJO: Esto afectara a los elementos seguidos con la misma etiqueta

ejemplo


HTML:

<h2></h2>
<h2></h2>


CSS:

h2+h2 {
    color: red;
}

_______________________________________


Selector de atributos (Para Inputs)

CSS

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



__________________________________________


Sistema de proriedades en css


id = 100 % de prioridad
class = 10%
Etiquetas = 1%
!important = no es un selector es un valor




*/```

Fuente del !important = 🐻 --> creéme we.

YO LE CREO!

Excelente clase, sigamos salvando osos polares 😄

Esos numeros de 1, 10, 100 y 100000, ¿fueron al azar o hay documentacion al respecto?

By: @majo ledesma

Wooow suena un poco raro pero esta clase me ayudo a resolver unos problemas que tengo y no sabia ni como resolverlos y entender la prioridad CSS

Polar bear lives matter. Do not use !Important

Cabe recalcar que el selector adyacente aplica estilos a los elementos hermanos que estan despues del elemento especificado, pero no a los anteriores aunque esten en el mismo nivel.

Pues he visto webs muy tesas e impecables usando el !important 😅
igual tratare de mejorar y atender estas recomendaciones

![](

Pueden encontrar mas info sobre Selectores CSS en la web de MDN (Mozilla Developer Network)
Aqui les dejo el link:
https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectores_CSS

No sabía que era mala práctica usar important

Gracias, acabas de crear la mejor estrategia para la proteccion animal

m

!!!NUNCA USAR IMPORTANT¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡