Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente
Contenido del curso
John Cardenas
Enrique Rabell Talamantes
John Cardenas
David Edson González Carrillo
Hector Castillo
Luis Jhonayquer Zapata Yamo
Jossie Steeven Quintero Giron
Mateo Callejas Holguín
Xiara Matos Pimentel
Victor Gea
Andrés Castellanos
José Luis Encastin Flores
Mau Cor
Sebastian Cifuentes
Pedro Isaac Aguilar
Luis Alberto Patti Choque
santiago alejandro
Douglaths Carrascal
SANTIAGO GUÁQUETA ANGARITA
Gabriela Mabel Mignone
Joel Dominguez Merino
Juan David Valencia
Agustin Mites
Asdrubal Chacin
Iván Arcos
Gabriel Carreño
Carlos Ramos
Alejandro Alzate
Juan Camilo García Ardila
Enrique Gamboa
Christian Silvero
emanuel
Eduardo Rodriguez
Aldo Miguel Ortiz Parodi
Orlando Lara
Lucy Taype
Jazmín Lizette Sánchez Neira
Nathalia Maya
Daniel Alejandro Romero Navarro
Fabian Flores
Scarlette Samanta Tinajero Paez
Gracias! Que pasa cuando llamas mas de una cosa, no entendi como lo explico el profesor. Es decir si tenemos .class #id{} que importancia tiene este ? o si tenemos #id tag{} este que importancia tiene
Si tenemos .class #id se aplicarán los estilos del ID porque el navegador los toma como más importantes. #id es más importante que: class y tag. Por lo tanto, sus estilos se aplicarán por encima de esas dos etiquetas :)
En Visual Studio Code puede utilizar este atajo para crear rápidamente un menú de navegación:
header>nav>ul>li*4>a + TAB
!Atajo VSC
Gracias buen hombre!
También puede hacer lo siguiente
header>h1+nav>(li>a)*4
Jaja xD, buena representación
Muy bueno!!
Esta extensión de Visual Studio Code te permite ver des de tu css las clases que tienes declaradas en tu html https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion
¡Gracias! justo iba a buscar una extensión para eso.
Está increíble la extensión. ¡Gracias!
Otra forma de agregar un estilo particular (en nuestro caso un color de fondo diferente) a la última etiqueta "<a href="">Blog</a>" es con una pseudo-clase "last-child". Esta pseudo-clase nos ayuda a agregar estilos al último elemento hijo entre sus hermanos, pero, hay que tener en cuenta que las etiquetas "<a>" del ejercicio no están bajo un mismo elemento padre "<li>", por lo tanto las etiquetas "<a>" no son hermanas:
<ul id="main-nav" class="nav"> <li><a href="">Home</a></li> <li><a href="">Cursos</a></li> <li><a href="">Instructores</a></li> <li><a href="">Blog</a></li> </ul>
Para solucionar este problema toca aplicar la pseudo-clase ":last-child" al elemento "<li>" en nuestro selector en la hoja de estilos ya que tienen un mismo padre "<ul id="main-nav" class="nav">, pero, para que aplique el estilo a la etiqueta "<a href="">Blog</a>" hay que descender hasta ésta:
#main-nav li:last-child a { background: orange; }
el resultado:
Muy buen tip
Buen aporte, me ha servido. Gracias!
Esto es lo que puedo hacer con todo lo aprendido hasta el momento con "escuela de desarrollo web" Me siento feliz :)  10.23.16 p.m..png](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202022-07-19%20a%20la%28s%29%2010.23.16%20p.m.-84262591-176c-4a85-a58a-69129a016bfe.jpg){kind=small}
felicidades amigo vas muy bien :D
Me inspiras!
Hasta te compro tu pag jeje
Una de las cosas que he aprendido en el corto tiempo que llevo en esto, es que una de las razones por las cuales utilizar un Framework como Bootstrap es una mala práctica, es que utiliza muchos important, construí una página utilizándolo y efectivamente realizar algunos cambios en los estilos fue super complejo. Excelente la explicación!
Es cierto, !important y <div> están por toda la web.
Si! Bootstrap implementa miles de !important por lo cual es como bien lo dices muy complejo y uno se siente limitado al querer personalizar el sitio.
He aquí mis apuntes https://www.notion.so/Especificidad-en-selectores-2fdd4a69d1cd409386453d03fa0b6352 Pueden también comentar si gustan y duplicarlos
Mas halla de llevar un orden y no caer en malas prácticas, es que debemos generar código de humanos para humanos y no crear código para el computador, porque, con malas prácticas podemos llegar al resultado. La verdad es muy molesto encontrar líneas de css que para agregar o solucionar un problema (tal vez por pereza o bueno quien sabe) les basto con usar el important o estilo en línea. Entonces lo mejor siempre será pensar en que en un futuro tenemos que modificar el mismo proyecto y si usamos malas prácticas, será un dolor de cabeza
allá*
En esta tabla podemos ver los niveles de especificidad por selector:
orden de precedencia: 
Clase 28 - Demo de especificidad y orden en selectores
¿Podemos usar un mismo ID en diferentes elementos HTML?
¿Podemos usar una misma clase en diferentes elementos HTML?
¿Por qué es buena práctica llamar a mas de una fuente tipográfica con la ayuda de la propiedad font-family?
¿Qué herramienta podemos usar para saber qué estilos se están aplicando a nuestros elementos HTML?
Una pregunta y por que se utilizan id,class,en una x etiqueta de html,que fin en especifico tiene ,osea por que utilizo los 2?
Hola normalmente se usa class para ponerle estilos al codigo html y se usa id para llamar a los elementos html en javascript tambien se usa para jerarquizar.
No es obligatorio usar ambas. si bien su utilidad es parecida, demás de servir para etiquetar o asignarle un nombre al elemento, la principal diferencia entre id y class es el uso que puedes darles.
-como las clases pueden repetirse, suelen usarse para compartir/agrupar estilos en css. -las id en cambio son unicas, por lo que son ideales para utilizarlas en funciones específicas con javascript.
pero realmente puedes usar id y class tanto en css como javascript. revisando codigo de otras personas puedes aprender sus diferentes usos.
Herencia:
Algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto.
Especificidad:
Importancia
!important (mala práctica)Especificidad
!important | (1,0,0,0,0)<style> | (0,1,0,0,0)#id | (0,0,1,0,0).class | (0,0,0,1,0)tag | (0,0,0,0,1)Orden en las fuentes
!
En nuestros estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto.
Excelente!
Buen resumen
26. Mis apuntes sobre: "Demo de especificidad y orden en selectores"
Un ID solo puede pertenecer a un solo elemento por documento HTML, pero un elemento puede tener una o más clases, las cuales incluso pueden ser compartidas entre varios elementos.
Cuando se agregan los font-family por defecto se agregan 3, para que en caso no haya el primero en el navegador, se agregue el segundo sino el tercero.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <title>Demo</title> </head> <body> <header class="page-header"> <h1 id="page-title" class="title">Empresa</h2> <nav> <ul id="main-nav" class="nav"> <li><a href="">Home</a></li> <li><a href="">Cursos</a></li> <li><a href="">Instructores</a></li> <li><a href="">Blog</a></li> </ul> </nav> </header> </body> </html>
Lo que el profesor menciona como CSS Reset, tiene una importancia inimaginable. Es una de las cosas que cualquier frontend developer desearía haber sabido desde un principio. Al hacer ese reset, le decimos al navegador: ¿sabes que? no quiero tus márgenes ni tus paddings, ni que coloques el borde por fuera de la caja. Ténganlo presente siempre; me atrevería a decir que es lo primero que debes colocar siempre.
* { margin: 0; padding: 0; box-sizing: border-box; }
Pero no todo es color de rosas, y ésto trae algunas desventajas. Por ejemplo, cuando creas una lista (ya sea ordenada o no), no vas a verla como se ve regularmente (con sangría y bullets), pero ésto lo puedes solucionar agregando en dichas listas el margen y/o padding correspondiente. Generalmente es engorroso tener que ponerle margen y/o padding a todo, pero vale la pena mirar tu página y darte cuenta de que todo está en donde tiene que estar y que el navegador no está molestando tus estilos.
Todas las propiedades completas de CSS3 bien explicadas 👏 ☑ https://www.mclibre.org/consultar/amaya/css/css-propiedades.html
Comparto los apuntes de la clase 😃
Muy buenos apuntes
Les dejo mis notas de esta clase(al menos la mayoria):
TIP: En Visual Estudio Code cuando colocas arriba el cursor puedes ver el selector de especificidad
¡Muchas gracias, buen hombre! :clap: ¿Qué esperan para darle más corazones a este súper tip para que más gente lo vea? :laughing: