Resumen de la clase de hoy: salva a un oso polar.
Introducción
Qué aprenderás sobre preprocesadores
Conceptos básicos de CSS
Selectores de CSS
Evolución de las Tecnologías de Front-End
Introducción a los Preprocesadores
Metodologías para estructurar código
Introducción a BEM
Guías para creación y mantenimiento de código
Instalación de herramientas de compilación
Preprocesadores para HTML
Introducción a Pug
Sintaxis
Interpolación
Variables
Condicionales y Loops
Mixins
Includes y Extends
Finalizando ejercicio de Landing Page
Less
Introducción a Less
Anidamiento e imports
Variables
Funciones
Mixins
Finalizando ejercicio de página de artículos
Sass
Introducción a Sass
Variables
Imports y Extends
Mixins
Funciones
Condicionales y Loops
Finalizando ejercicio de perfil de usuario
Stylus
Introducción a Stylus
Variables
Mixins
Funciones
Condicionales y Loops
Desarrollo del proyecto Platzi Games
Introducción al proyecto
Plantillas modulares con PUG: Header
Plantillas modulares con PUG: Footer
Grid System con Sass
Mixins para manejo de fuentes responsivas
Funciones para media queries
Finalizando el proyecto
Conclusiones y Cierre
Conclusiones y Cierre
Los selectores nos sirven para seleccionar los diferentes elementos en una página web y aplicar estilos
Existen los siguientes tipos de selectores:
La prioridad de un selector se determina por la suma de su contenido:
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
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 */
/* 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!
Los selectores nos sirven para seleccionar los diferentes elementos en una página web y aplicar estilos
Existen los siguientes tipos de selectores:
*{
margin:0;
padding:0
}
p {
color:blue;
}
h2,h2,h3,h4,h5 {
font-famlily:Arial,Helvetica;
color:black;
}
#verde {
color:gree
}
.verde{
color:green;
}
span {
color:black;
}
p span {
color:red;
}
p > span {
color:red
}
h2+h2 {
color:red;
}
input[type='number'] {
border:black;
}
La prioridad de un selector se determina por la suma de su contenido:
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:
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:
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: 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.
A cada tipo de selector se le da un valor diferente.
Les comparto mis apuntes, espero que le sierva. 😄
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.
Agregamos un poco más de especificación sobre a que elementos le queremos agregar ciertos estilos.
Se aplican los estilos al elemento que este dentro de otro, se especifica el padre y al hijo que le queremos agregar los estilos.
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.
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.
En este tenemos que colocar >
entre dos selectores.
Se aplica los estilos solamente a los hijos directos.
Es parecida al selector de hijos, solo que este aplica los elementos que sean hermanos cercanos de cierto selector.
Se lo usa mucho cuando trabajamos con formularios.
Tenemos que llamar al selector seguido del atributo que tiene el mismo.
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.
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)
> 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:
// 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
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;
}
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
.
p { color: red;}
, donde todos los párrafos van a tener un color rojo..class1 { color: pink;}
donde todos los elementos con la clase “class1” van a tener un color de rosa. El mas recomendable.#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..class2 { color: green important!;}
. Nada recomendable, si lo usas habrás matado a un oso polar..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..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.
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!! 😄
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.