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

[Duda] ¿Cómo funciona la aplicación de estilo en funcion de los selectores que cree en el .css?

Viendo la clase 03 de la parte 1 de HTML y CSS, hay un momento en donde se crea un selector para modificar el color de una frase que está en negrita y en italica. el nombre con el que se crea el selector es "em strong", al actualizar la página se ve cómo el color solo se aplica a efectivamente a la frase entre comillas junto con las comillas.

Mi pregunta es: ¿Por qué ese color no se aplicó a toda la frase del parrafo? porque toda la letra que está dentro del em es todo el contenido y solo se aplica al contenido que está dentro del strong que a su vez está dentro del em?

Tiene que ver esto con lo de estilo de cascada?

Es decir, el em simplemente es para diferenciar ese contenido dentro de la etiqueta strong de otra etiqueta strong que esté presente y que no quiero que sea modificada?

En ese caso, es correcto afirmar que a la hora de crear selectores en el .css, el estilo se aplicará a la última etiqueta del nombre del selector?

Es decir, en ese caso se aplicó al strong, porque esta etiqueta era la útlima que había (em strong{}) y el em solamente sirve para ser más preciso a la hora de establecer cuál strong quería cambiar?

4 respuestas

Hola jhonier strong y em son etiquetas para dar enfasis al texto ambas hacen lo mismo,la diferencia es que strong es para dar mas enfasis al texto. Con respecto a tu duda el selector em strong se aplicara a todos los elementos strong dentro de lo em es pero que el ejemplo te sea de utilidad

<p>
         <em>El dinero es importante <strong>la salud es lo mas.</strong> </em>
</p>
em strong{
    color: red;
    font-size: 2em;
}

Ya, pero a lo que voy es que la lógica ahí es que digamos que si yo en vez de tener em strong, tengo digamos em y otra etiqueta, cuando cree el selector el estilo se aplicará a la última etiqueta que haga y no al em?

hola,no se aplica al em,se aplicara a los elementos dentro del em en caso que sea el selector descendiente por ejemplo:

em p{
    
    // se aplica a todos los p dentro de los em
}

si queres darle estilo al em podrias usar una clase, o otro tipo de selector segun el caso.

Sacado de MDN https://developer.mozilla.org/es/docs/Web/CSS/Descendant_combinator

"El ␣ combinador (que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector."

Para una descripción detallada de todos los tipos de combinaciónes que puende haber con selectores en css recomiendo este link: https://www.w3schools.com/cssref/css_selectors.php