Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¬ŅQu√© es el Frontend?

3

¬ŅQu√© es Backend?

4

¬ŅQu√© es FullStack?

5

P√°ginas Est√°ticas vs. Din√°micas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura b√°sica: head

8

Index y su estructura b√°sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de im√°genes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¬ŅQu√© es CSS?

22

¬ŅC√≥mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M√°s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr√°cticas y ejemplos de responsive

50

Im√°genes responsive

Quiz: Responsive Design

Accesibilidad

51

Sem√°ntica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Especificidad en selectores

27/55
Recursos

Aportes 174

Preguntas 28

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Visual Studio también te ayuda en esto.
Solo tienes que poner el mouse por encima del selector y te dar√° la especificad

REGLAS DE CASCADA (notas):

Esta p√°g. me es muy √ļtil pues coloco mi c√≥digo CSS y puedo monitorear su especificidad, es muy curiosa.
Generador gr√°fico de especificidad CSS
nota: tocar la pantalla para refrescar.

Especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.



Primer grupo (derecha a izquierda)

Segundo grupo (derecha a izquierda)

Tercer grupo (derecha a izquierda)

Cuarto grupo (derecha a izquierda) (no recomendado)

Quinto grupo (no recomendado)



Fuente Entendiendo la especificidad de CSS

CASCADAS
La cascada se usa cuando hay dos o mas declaraciones que afectan a un elemento, es decir, cuando hay mas de dos reclas que afectan a una etiqueta html, cuando esto ocurre la cascada determinara cual de estas es tiene mayor importancia, y la de mayor importancia sera la que se aplicara. L forma de calcular el peso de una regla no se hace de forma arbitraria, se calculan en base a 3 criterios:

1.- Importancia -----> Las declaraciones importantes son las declaraciones que van seguidas de una directiva llamada: !important. Cualquier otra declaracion sin !important son consideradas declaraciones normales.

2.- Especificidad -----> La regla dice que el selector mas especifico sera el que se tome en cuenta. La forma para calcular la especificidad de un selector se hace con la siguiente formula.

se juntan todos los bloques obtenidos, a mayor numero mayor especificidad, y sera tomado en cuente la regla con mayor especificidad.

3.-Orden ------> Podemos definir los estilos en hojas externas, en la cabecera de la pagina y en la misma etiqueta (estilos en linea), el navegador lee el contenido de una pagina de arriba hacia bajo y los ultimos estilos definidos seran los que se tomaran en cuenta.

Orden de declaración en .css

  1. Importancia
  2. Especificidad
  3. Orden de fuente

Importancia.

  1. Hoja de estilo de agente de usuario (Estilos del navegador): primero el navegador va a implementar los estilos que ya trae por defecto

  2. Declaraciones normales en hojas de estilo de autor (nuestro .css) que son los estilos que nosotros colocamos en nuestro proyecto.

  3. Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

Especificidad: el orden de importancia es:

  1. !important
  2. Iniline styles
  3. #id
  4. ,class
  5. tag

Para evitar rescribir estilos y que se rompa nuestro código tenemos que evitar los !important, Iniline styles #id y tag.

Orden de la fuente: las declaraciones finales son las que se se van a ejecutar en el caso que los estilos tienen la misma especificidad

Como curiosidad y para calcular el ‚Äúpeso‚ÄĚ de la especificidad en CSS podemos usar una herramienta como Specificity Calculator

Cuanto m√°s grande sea el n√ļmero calculado debajo mayor especificidad tendr√° la regla.

Aqu√≠ un v√≠deo para reforzar a√ļn mas el concepto de especificidad:
https://www.youtube.com/watch?v=v5GxoV14YOE

Falto mencionar las especificidad de los pseudo-clases y pseudo-elementos:
Pseudo-Clase: (0,1,0)
Pseudo-Elemento: (0,0,1)


Entender especificidad es entender CSS, prácticamente puedes tomarlo como que, mientras más espécífico sea, mayor importancia le dará CSS, y todos los estilos que tu coloques debajo de otros serán reemplazados en dado caso de que tengan la misma especificidad.

Esto es importante, porque por ejemplo, si tu quisieras reemplazar las clases de alg√ļn framework podr√≠as hacerlo simplemente colocandop tus estilos DESPU√ČS de mandar a llamar al Framework ^^

Para terminar de entender el tema de herencia en CSS es importante también entender el orden de la declaración y la especificidad que tiene CSS.
¬ŅC√≥mo se controla el orden al declarar CSS?
Aquí se va a mencionar las reglas que aplica CSS y el navegador para poder implementar los estilos.
CSS y el navegador van a tener 3 puntos que son importantes para decidir que estilos se van a implementar

  1. Importancia: es uno de los conceptos m√°s, pues, importantes. Si dos declaraciones tienen la misma importancia, la especificidad de las reglas decidir√° cu√°l se debe aplicar. Si las reglas tienen la misma especificidad, el orden de las fuentes controla el resultado final.
    El tema de la importancia el navegador va a cargar los estilos de forma distinta,
    a) Hoja de estilo de agente de usuario (Estilos del navegador). Primero el navegador aplica sus estilos que él tiene para ciertas etiquetas de html.
    b) Declaraciones normales en hojas de estilo de autor (Nuestro.css). Después va como cumplir la declaración de las normas que vengan en nuestros estilos como developers, quiere decir todos los puntos CSS que vamos a generar.
    c) Declaraciones importantes en hojas de estilos de autor (utilizar el ¬°important). Por √ļltimo, va a aplicar los estilos que vengan con un import al final en nuestra hoja de estilos, esto es importante. Tratar de evitar el ¬°important, no son buenas pr√°cticas.
  2. Especificidad: los n√ļmeros de derecha a izquierda, quiere decir derecha es menos importante e izquierda son muy importantes para el navegador.
    Tenemos que ¬°important es el punto mas importante y este no es buena pr√°ctica tenemos que evitarlo.
    Después va a tomar en cuenta todos los estilos que vengan en Inline, que son los estilos que se embeben en la etiqueta de html. Está en un punto 4 de importancia, tenemos también que evitarlos.
    Después entran todos los estilos que se le apliquen a los id.
    Después vienen todos los estilos que se le apliquen a las clases.
    Por √ļltimo, vienen todos los estilos que se le apliquen a selectores como etiquetas de html.
  3. Orden en las fuentes: En tus estilos, las declaraciones al final del documento anular√°n a las que sucedan antes en caso de conflicto.

Cuando Diego habla sobre cómo carga CSS en el navegador, es algo parecido a esto:

Otro motivo por el cual no veas reflejado el css puede ser el cache de tu navegador.

Consegui esto me parecio interesante compartirlo
https://specifishity.com/

**RELEVANCIA DE ESTILOS
**
REGLA 1: si un estilo definido en la cabecera entra en conflicto con un estilo definido en un archivo externo, se aplican los estilos de aquella definicion que este mas cerca de la etiqueta afectada.

RELA 2: los estilos en linea, al ser aplicados directamente en la etiqueta son los que siempre tienen mayor relevancia.

REGLA 3: la unica excepcion a la regla 1 y 2 es el uso de !important, el cual le indica al navegador que al margen del orden como se han definidos los estilos, el elemento que contenga !important sera el que prevalece.

Un resumen de como se aplican las propiedades en CSS

  1. Importancia
  2. Origen
  3. Especificidad
  4. Posición

ūüďĆ La especificidad es la importancia o valor que se le asigna a una declaraci√≥n CSS.

El problema de especificidad lo encontramos mucho cuando usamos frameworks pues estos tienen sus propios estilos y etiquetas y batallar con estos algunas veces puede tornarse tedioso debido a la herencia. Por eso es importante ser mas especifico que el framework.
Saludos.

Esto lo vi en la clase de soy dalto.

Notas de la clase

27.-Especificidad en selectores

¬ŅC√≥mo se controla el orden al declarar CSS?

1. Importancia: Si dos declaraciones tienen la misma importancia entonces la especificidad nos va a decir que regla se aplicar√°, pero si dos reglas tienen la misma especificidad es el orden el que va a decidir cual es el resultado final.
1. El navegador va a cargar los estilos de forma distinta (primero aplica sus estilos).
2. Después cumple las declaraciones de las normas que vienen en nuestros estilos(todos nuestros CSS).
3. Por √ļltimo, aplica los estilos que vienen con un ‚Äú!important‚ÄĚ al final en nuestra hoja de estilos. NO PONERLO PORQUE SI. Hay que evitarlo porque no son buenas pr√°cticas.

2. Especificidad: De derecha a izquierda(menos importante a más importantes para el navegador). Si tenemos un conflicto. Por ejemplo: agregamos varios estilos y existe un conflicto de que se rompan los estilos y tenemos una etiqueta de html con una clase tendríamos 0,0,0,1,1 que es más importante que solo la clase; lo mismo con un id con clase

3. Orden en las fuentes (como mandas llamar los estilos o donde colocas el estilo): En los estilos, las declaraciones al final del documento anularán a las que sucedan antes en caso de conflicto. Es decir, como CSS es como una cascada, los estilos que siempre se van a aplicar son los que estén hasta abajo reescribiendo los de arriba. También aplica en los .css que mandemos llamar.

El algoritmo en cascada le va a dar más importancia al código que esté más abajo, siempre y cuando tenga el mismo nivel de especificidad. Si la especificidad es mayor entonces esa será su prioridad.

Orden es Especificad:
1- !important
2- Inline styles
3- #id
4- .class
5- tag

La Especificidad es uno de los temas m√°s importantes a tomar en cuenta, y es por los que surge muchos inconvenientes a la hora de programar.

En cuanto a la la regla !important , ésta invalida a las demás por orden de jerarquía. Su utilidad es muy específica y concreta en muy pocos casos, lo mejor es no utilizarla ya que se considera una mala práctica.

Esta regla puedes verla utilizada ‚Äúusualmente‚ÄĚ en los CMS como Wordpress a la hora de modificar estilos. Ya que muchas veces no se puede acceder a los estilos b√°sicos de la plantilla y en ese caso se opta por la regla** !important**. Pero si se puede evitar su uso, mucho mejor.

  • El orden de la declaraci√≥n de CSS toma en cuenta la importancia en primer lugar, luego la especificidad y finalmente el orden en las fuentes.
  • En importancia, primero toma las fuentes predeterminadas del navegador, luego las hojas normales *.css, y por √ļltimo las declaraciones !important de los que se realicen en los css.
  • La especificidad en lo selectores, toma en cuenta los que tengan la declaraci√≥n !important, luego los inline style, luego #id, luego .class y finalmente las tag de etiquetas.
  • La declaraci√≥n del orden, se da arriba hacia abajo, es decir los √ļltimos estilos en aplicarse sobreescriben a los primeros. [CalCSS]

Resumen de la clase

![](
![](

Importancia:
1- Hoja de estilo agente de usuario (Estilos del navegador)
2- Declaraciones normales en hojas de estilo de autor (Nuestro.css)
3- Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

Orden de las fuentes.
En tus estilos, las declaraciones al final del documento anularan a las que sucedan antes en caso de conflictos.

En este sitio pueden revisar cómo está su CSS respecto a la especificidad: https://jonassebastianohlsson.com/specificity-graph/

El selector universal (*) tiene una especificidad de 0,0,0 lo que significa que no causara conflicto alguno
[](

Uff el tema del orden de las fuentes me habr√≠a evitado ciertas frustraciones en clases pasadas jajaja ūüė¶

Importarcia

Especificidad de mayor importancia a menor

Reglas de cascada

Orden de las fuentes

Gracias!

La especificidad es la manera mediante la cual los navegadores deciden queŐĀ valores de una propiedad CSS son maŐĀs relevantes para un elemento y, por lo tanto, seraŐĀn aplicados.

No entendí mucho, así que fui a esta página click y me se me facilito porque tenían imágenes.
Espero y les ayude tambi√©nūüĎćūüŹĽ

Maestro Diego:La importancia es uno de los conceptos mas importantes .
Yo: ūüėģ oh no puede ser , no no entendi.
Maestro Diego: de seguro ahorita no entendiste .
Yo:El maestro es adivino ūüėģ

Estoy investigando para complementar el tema

Importancia > Especificidad > Orden de las fuentes

Importancia

1.- Hoja de estilo de agente de usuario(estilos del navegador)
2.-Declaraciones normales en hojas de estilo de autor (nuestro.css)
3.-Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

Important no es un selector se√Īor. Es una regla o una propiedad pero no un selector https://www.w3schools.com/css/css_important.asp

VSCode Nos ayuda a saber la especificidad:

Especificidad en selectores



¬ŅC√≥mo se controla el orden al declarar CSS?

  • Importancia

    • Primero se utiliza los estilos que tiene el navegador
    • Declaraciones normales en hojas de estilo autor(nuestro.css)
    • Declaraciones importantes en hojas de estilos de autor (utilizar el !importa)

    Tenemos que evitar el ‚Äú!important‚ÄĚ porque no son buenas practicas.

  • Siempre que tengamos un tag y .class sera mas importante que tener un solo .class

  • Y de igual forma siempre una .class y un #id va a ser mas importante que solo un #id

ORDEN DE LAS FUENTES

  • En tus estilos, las declaraciones al final del documento anular√°n a las que sucedan antes en caso de conflicto. Es decir, si tenemos un clase y la llamamos al principio, pero tambi√©n al final con otra instrucci√≥n, eso puede alterar nuestro c√≥digo, al igual que la forma en la que se colocan las hojas de css que nuestro html tiene.

Orden

ORDEN AL DECLARAR CSS:

1. Importancia:
1.1. Estilo del navegador
1.2. Nuestro estilo
1.3. !important (reemplaza los estilos que ya hay, tratar de evitarlo)
++2. Especificidad: ++
Reglas de cascada.
2.1. !importan (importancia: 1,0,0,0,0)
2.2. inline styles (importancia: 0,1,0,0,0)
2.3. #id (importancia: 0,0,1,0,0)
2.4. .class (importancia: 0,0,0,1,0)
2.5. tag (importancia: 0,0,0,0,1)
3. Orden en las fuentes

Este tema es muy importante para no frustrarnos con CSS cuando algunos estilos no se aplican como nosotros queremos.

<h3>Orden al declarar CSS</h3>
  1. Importancia
        a) Hoja de estilo de agente de usuario (estilos del navegador).
        b)Declaraciones normales en hojas de estilo de autor (CSSDocument.css)
        c)Declaraciones importantes en hojas de estilos de autor (utiliza el import !import) Evitarlo

  2. Especificidad

    Nota: Entre más cerca esté el 1 a la izquierda mayor preferencia le dará el navegador

          Nota 2: Tratar de evitar el uso de important e inline style

          Nota 3: Cuando se usa dos o más selectores la especificidad que le dará el navegador web será dada por la suma de los selectores que se usaron (Son valores binarios entre mayor sea este valor mayor especificidad tendrá)
 
3. Orden en las fuentes: Los estilos que se llamen al final sobrescribir√°n los estilos ya establecidos, es como pintar una casa la √ļltima capa de pintura quitar√° el color de la primera
 

<h3>Conflicto en la declaración</h3>

¬ŅDiferente origen o !important?
Si
    Utiliza la declaración con mayor prioridad
No
¬†¬†¬†¬†¬ŅTiene alg√ļn inline style?

    Si

        Utiliza las inline declaration

    No

¬†¬†¬†¬†¬†¬†¬†¬†¬ŅLos selectores tienen una especificidad diferente?

        Si

            Utiliza las declaraciones con mayor especificidad

        No

            Utiliza las declaraciones que vienen en su fuente

En este caso les comparto esta web, est√° hermosamente dise√Īada en CSS, aunque est√° en ingl√©s me ha ayudado a entender mejor la clase:
https://wattenberger.com/blog/css-cascade

excelente aporte

hola amigos una pregunta, cual es la diferencia entre un ID y un .CLASS

Que bac√°n ense√Īa el profe de Granda, un genio

nice class!!

GRACIAS

MUY INTERESANTE

ūüíö

Muchisimas gracias!!

Importancia: 1 - Estilos de Navegador 2 - Nuestro .css 3 - EL !important

Esto es lo que me faltaba saber para no pelear con css xd

gracias a !important puedo llevar pan a mi casa JAJAJAA

Entender esto es s√ļper importante!

Que largo este cursoo pero que necesario!! Vamos Platzi day! Gracias a todo el team por esta oportunidad!

despues de ver estaexplicacion 10 veces ahora me queda super claro XD

Este sera nuestra nueva biblia al momento de escribir CSS y tener dudas en la Especificidad, es decir que tiene mas peso u valor en nuestro documento…

y también hay que saber que hace CSS cuando detecta algun conflicto con los mismos…

Esta clase super importante, dificil de comprender

RESUMEN CLASE 27:
ESPECIFICIDAD EN
SELECTORES

¬ŅC√≥mo se controla el
orden al declarar CSS?

I. Importancia
II. Especificidad
III. Orden en las fuentes

I.- IMPORTANCIA

  1. Hoja de estilo de agente de usuario
    (Estilos del navegador)
  2. Declaraciones normales en hojas de
    estilo de autor (Nuestro .css)
  3. Declaraciones importantes en hojas de
    estilos de autor (utilizar el !important)
    Especificidad

A.- ESPECIFICIDAD

B.- REGLA DE CASCADA

III.- ORDEN DE LAS FUENTES

En tus estilos, las declaraciones al final del
documento anular√°n a las que sucedan
antes en caso de conflicto.

Información resumida de esta clase
#EstudiantesDePlatzi

  • Debemos tener claro el orden de la declaraci√≥n y la especificidad en CSS. Es importante

  • El orden de la declaraci√≥n en CSS es el siguiente:

  1. Importancia, 2. Especificidad, 3. Orden de las fuentes
  • Si tenemos dos declaraciones importantes, el orden lo va a definir la especificidad y si tenemos dos declaraciones con la misma especificidad, el orden lo define la fuente

  • Utilizar !important es una mala pr√°ctica y debemos evitarla

  • El navegador aplica los estilos en forma de cascada

¬ŅC√≥mo se controla el orden al declarar CSS?

  1. Importancia

    • primero carga los estilos del navegador

    • despu√©s carga los estilos de nuestro .css

    • por √ļltimo aplica los estilos que nosotros hayamos marcado como !important en nuestro .css

  • si por alg√ļn motivo tenemos m√°s de un estilo para el mismo elemento marcado como !important, se aplicar√° el que tenga una mayor especificidad, si ambos tienen el mismo nivel de especificidad, pasara a tomar la decisi√≥n el orden de las declaraciones, siendo la ultima de ellas la se aplicar√°(aplicando la cascada)
    NOTA: !important es una MUY MALA PR√ĀCTICA
  1. Especificidad (Mayor a menor importancia)

    • !important (muy importante)

    • estilo en l√≠nea

    • #id

    • .class

    • tag (menos importante)

  • si por alg√ļn motivo tenemos un elemento con m√°s de una declaraci√≥n css, la que sea m√°s importante ser√° aplicada, sobre escribiendo los estilos de la otra, aunque la menos importante sea la √ļltima en declararse (modo cascada)
  1. Orden de las Fuentes (estilo en cascada)
  • El estilo que se aplicar√° a nuestro elemento ser√° el √ļltimo en ser declarado, quiere decir que si tenemos m√°s de un estilo para el mismo elemento, el √ļltimo en ser declarado sobre escribir√° al resto, ya que est√° usando el m√©todo cascada.

no me quedo claro lo que es un estilo embebido

Debemos entender el orden de declaración y especificidad en CSS para comprender bien la herencia. Muchas veces generamos estilos que no vemos en el navegador, o cambiamos un estilo y se rompen otros.

¬ŅC√≥mo se controla el orden al declarar CSS?

  • Importancia. Es uno de los elementos m√°s importantes. Si dos declaraciones tienen la misma importancia, la especificidad de las reglas decidir√° cu√°l se debe aplicar. Si las reglas tienen la misma especificidad, el orden de las fuentes controla el resultado final. El orden en que se cargan los estilos es el siguiente:
  1. Hoja de estilo de agente de usuario (estilos del navegador).
  2. Declaraciones normales en hojas de estilo de autor (nuestro .css)
  3. Declaraciones importantes en hojas de estilos de autor (utilizar el !important). Generalmente cuando un desarrollador no puede aplicar un estilo, usa !important. Esto es una muy mala práctica ya que puede romper otras cosas. Al final no entenderemos por qué los estilos se comportan de manera distinta a la que esperamos.
  • Especificidad.

Los n√ļmeros se leen de derecha (menos importantes) a izquierda (m√°s importantes).
Como observamos, !important es el m√°s importante para el navegador, y lo debemos evitar.
Inline styles son los estilos que se embeben en la etiqueta html. Se van a aplicar los estilos embebidos por encima de los estilos aplicados.
Luego se aplican los #id.
Luego se aplican las clases .class.
tag son los selectores que se aplican a etiquetas html.

Si estás, por ejemplo, llamando una clase y no funciona, puedes llamar dos en vez de una. Dos son más importantes que una, logrando así reescribir los estilos.

Puedes calcular la especificidad de los estilos en esta p√°gina.

Cuando hay dos etiquetas con el mismo estilo o clases similares, hay un conflicto. Para resolverlo, el navegador toma en cuenta el siguiente algoritmo:

  • Orden de las fuentes. C√≥mo mandas a llamar los estilos o en qu√© l√≠nea de c√≥digo colocas el estilo.
    En tus estilos, las declaraciones al final del documento anular√°n a las que sucedan antes en caso de conflicto. Siempre se van a aplicar los que est√°n al final, es como una cascada. Si est√°s llamando una clase o id en las primeras l√≠neas y luego llamas la misma clase al final con cosas no tan importantes, se aplicar√°n las √ļltimas. En CSS es importante en qu√© l√≠nea escribimos el c√≥digo. Lo mismo aplica para los archivos .css, el orden en que los llamemos es como se van a aplicar.

Aprendi un poco mas en este video les dejo el link y esta screen para entender mejor el tema de esta clase:

https://www.youtube.com/watch?v=OWKXEJN67FE&t=2433s

Por fin pude entender la especificidad!!!
Gracias Diego ‚̧ԳŹ

Se nota que HTML y CSS est√° hecho por varias personas diferentes y es parche sobre parche.
Si estuviera mejor dise√Īado y estructurado no habr√≠a posibilidad de tantos posibles conflictos.

Esta es una clase de Chino jajajaja

Puedes entender la especifidad como un puntaje donde Important vale 10000 pts, estilo en linea vale 1000 pts, el id vale 100, las clases valen 10 y luego los demas
.
En caso de que haya un conflicto, se aplicar√° el estilo del selector que tenga mayor puntaje:
.
.container-padre {

}
.
.container-padre .container-hijo {

}
.
El segundo selector es m√°s especifico porque tiene 2 clases y suman 20pts, el primero tiene solo una clase y suma 10pts

orden de decisiones cuando hay conflicto al aplicar estilos

La especificidad es super importante en la practica es por eso que siempre se debe usar id y classes para hacer todos los estilos en nuestro codigo evitando usar el important!
esto hace que, si es el caso, se facilite mas encontrar la razon por la que nuestros estilos no se aplican

Muy importante entender la ‚ÄúEspecificidad‚ÄĚ para poder modificar y agregar estilos en nuestro CSS.

Me est√° encantando este curso ūüėĄ

En lugar de usar !important, considera:

  • Hacer un mejor uso de las propiedades en cascada de CSS.

  • Usar reglas m√°s espec√≠ficas. Indicando uno o m√°s elementos antes del elemento que est√°s seleccionando, la regla se vuelve m√°s espec√≠fica y gana mayor prioridad:

Important

Algunas reglas de oro:

  • Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.

  • Usa !important solo en declaraciones espec√≠ficas de CSS que sobrescriban CSS externo (de librer√≠as externas como Bootstrap o normalize.css).

  • Nunca uses !important cuando est√©s intentando escribir un plugin/mashup.

  • Nunca uses !important en todo el c√≥digo CSS.