/****
Video Uddo Cracka
https://www.youtube.com/watch?v=PmYvcEpahuk
***/
/**Aplicar a todos menos al último*/
.clase:not(:last-child){
background: yellow;
}
/*Aplicar a dos pseudoelementos de dos clases distintas al mimso tiempo
usando WHERE
*/
:where(.clase, .clase-2):before{
content:"hello";
background: red;
color: white;
padding: 1rem 3rem;
}
/***Preferible hacer los media querys con
@media (min-width: ***px)
Se evita tener el código normal y luego hacer un
@media (max-width: ***), con el @media (min-width: ***px) ya sirve de una tacada
**/
/*****EJEMPLO CON @max-width ***/
:where(.clase, .clase-2):before{
content:"hello";
background: red;
color: white;
padding: 1rem 3rem;
}
@media (max-width: 1200px){
:where(.clase, .clase-2):before{
display: none;
/**** Resto código**/
}
}
/*****EJEMPLO CON @min-width ***/
@media (min-width: 1200px){
:where(.clase, .clase-2):before{
content:"hello";
background: red;
color: white;
padding: 1rem 3rem;
}
}
/**Ya no hay que poner mas código ***/
/**** FIN EJEMPLO MEDIA QUERYS *****/
/*** Ajustar tamaño de imagenes con aspect-ratio ****/
.clase-imagen{
width: 400px;
height: auto;
object-fit: cover;
aspect-ratio: 1;
}
/* Poner el ancho o el alto en auto y el aspect-ratio en un valor hará que las
medidas de la imagen se ajustaran en proporcionalmente al ratio
al variar el ancho de la pantalla.
*/
