Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
5
respuestas

[Duda] Duda topic de jerarquia css

Hola comunidad, no terminé de entender lo que el profesor explica con esto:

p.test{
    color: orange;
}

En que casos puedo usar etiqueta + clase?

Por qué no solo usar el .test o test p?

Son mis dudas.

Gracias

5 respuestas

`

`el explica que las etiquetas inline son por asi decirlo las que tienen mas peso dentro del codigo y son las que van esipuladas dentro del codigo de HTML. luego que dentro de las etiquetas del CSS el id es la etiqueta con mas peso y es por eso que al hacer una modificacion directamente en este elemento el CSS ignora el resto de modificaciones que sean del mismo tipo . los elementos class y las etiquetas directas son de menor inpacto en el codigo. Ej: < p style=color:"red">color

etiqueta inline en HTML que al modificar el elemento tiene mayor peso.

en CSS:

color

// #color{ etiqueta llamada por id tiene mayor peso dentro del CSS color: red; }

color

// .color{ etiqueta llamada por class seguida del id en peso del CSS color: red; }

color

// p{ etiqueta llamada por su nombre propio del HTML siendo la de menor peso en el CSS. color: red; }

Ahora supongamos que cada una tiene un valor de peso :

  • p = 1 etiqueta HTML
  • .color = 10 class
  • #color = 100 id
  • inline = 1000 directamente en -html

entonces si usamos una etiqueta junto con otra se haría la sumatoria dando un peso mayor dentro de CSS

form p = 1 + 1 = 2 suma de dos etiquetas HTML p.color = 1 + 10 = 11 suma de una etiqueta con una class

Hola, Johan. Muchas gracias por esta explicación tan buena.

De casulidad, sabes si hay diferencia entre esto?:

p.test{
    color: orange;
}

y

.test p{
    color: orange;
}

cuando hay más de dos elementos el último elemento es al que se le aplican los estilos, los primeros serian de selección, de los ejemplos que pusiste, al primero se le aplican los estilos al o los elementos con la clase .test que pertenezcan a un p y en el otro se le aplican los estilos al o los elementos p que pertenezcan un elemento con la clase .test.

Hola, Aldo, gracias por la explicación.

Sin embargo, todavía no entiendo muy bien :( , pero agradezco a ustedes 2 caballeros por haber tomado el tiempo en explicarme. Algo estoy seguro, aprendí más con sus explicaciones que cuando inicie. <3

en tu ejemplo p = a una etiqueta propia de HTML llamada al CSS para aplicar un stylo .test = a una class definida en una etique del HTML y llamada de esa manera para aplicar un stylo

cuando pongo la etiqueta p* y seguido la *class estoy indicando que quiero realizar el stylo a esa class que se encuentra dentro del bloque de la etique **p

y pues practicamente pasa igual poniendo la class primero que la etiqueta