Te comento:
- Un elemento (etiqueta HTML) puede tener mas de una clase declarada (esto dependerá de la arquitectura aplicada y de las necesidades de cada desarrollo)
- En tu ejercicio cada nodo
p
tiene 2 clases
- Una genérica llamada:
parrafo
misma que cuando uses para construir tu(s) regla(s) CSS y afectará de manera inicial a todos los que las compartan
- Una específica llamada:
parrafo-#
la cual de hecho no me hace sentido al menos con el escenario planteado pues no existen otros párrafos que la compartan y deberían en todo caso ser ids
que son identificadores únicos para cada nodo
Con respecto a tu regla CSS, lo que estas usando es un selector de clase el cual perfectamente puede quedar simplemente como:
.parrafo-1 {
font-size: 35px;
color: deepskyblue;
text-transform: uppercase;
}
¿Por qué?
Bueno al momento tu ejercicio no tiene otros párrafos que compartan esta nomenclatura: .parrafo .parrafo-1
entonces no es necesario ser tan específico.
¿Entonces por qué o para qué un selector del tipo que esta en el código?, bueno imagina un escenario como este:
<section class="listado">
<p class="listado-parrafos parrafo1">Párrafo 1</p>
<p class="listado-parrafos parrafo2">Párrafo 2</p>
<p class="listado-parrafos parrafo3">Párrafo 3</p>
</section>
<section class="listado">
<p class="listado-parrafo parrafo1">Párrafo 4</p>
<p class="listado-parrafo parrafo2">Párrafo 5</p>
<p class="listado-parrafo parrafo3">Párrafo 6</p>
</section>
El cual quiero aplicar estilos solamente a los que tienen la clase parrafo-1
, del primer trio de párrafos entonces si hago esto:
<style>
.parrafo1 {
color: crimson;
}
</style>
<section class="listado">
<p class="listado-parrafos parrafo1">Párrafo 1</p>
<p class="listado-parrafos parrafo2">Párrafo 2</p>
<p class="listado-parrafos parrafo3">Párrafo 3</p>
</section>
<section class="listado">
<p class="listado-parrafo parrafo1">Párrafo 4</p>
<p class="listado-parrafo parrafo2">Párrafo 5</p>
<p class="listado-parrafo parrafo3">Párrafo 6</p>
</section>
Si cambia el color del párrafo, el problema es que lo hace con los párrafos 1 y 4 y yo deseo que se aplique al primero; entonces el selector debería ser así:
<style>
.listado-parrafos.parrafo1 {
color: crimson;
}
</style>
<section class="listado">
<p class="listado-parrafos parrafo1">Párrafo 1</p>
<p class="listado-parrafos parrafo2">Párrafo 2</p>
<p class="listado-parrafos parrafo3">Párrafo 3</p>
</section>
<section class="listado">
<p class="listado-parrafo parrafo1">Párrafo 4</p>
<p class="listado-parrafo parrafo2">Párrafo 5</p>
<p class="listado-parrafo parrafo3">Párrafo 6</p>
</section>
Conclusión:
- ¿Es estrictamente necesario un selector como este?
No y puede quedar como te propongo pero solamente bajo una estructura HTML como la que muestras
- ¿es incorrecta la forma en que se declaró el selector?
No, de hecho lo que logras es un nivel de específicidad mayor y que seguramente será de mayor funcionalidad en una estructura mas compleja.