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.