3

Bueno mi duda con respecto a los selectores en css me tiene un poco frustrado porque no lo entiendo .parrafo.parrafo-1 que funcion tiene alguien me lo puede explicar o dejar algo en claro ?

  • ¿porqué agregan esa combinación de selectores asi?
  • ¿no es mejor usar .parrafo-1 y asi solo se le agrega la clase ?

Aqui esta el enlace :https://codepen.io/manueldavid23/pen/yLOVNWx

0

2 respuestas 2

3

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.

0

Tienes parte de la razón, si el css se escribiera a puño y letra. Pero algunas veces esto aparece por el uso de compiladores de css con lenguajes como less sass o scss:

y el único objetivo de que el selector css tenga dos clases concatenadas: es para que solo funcione sobre elementos que tengan esas dos clases.

Ejemplo:

* {
    color: green;
}

.foo.bar {
    color: red;
}
<div class="foo">Hello Foo</div>       <!-- No seleccionado, texto verde [1] -->
<div class="foo bar">Hello World</div> <!-- si seleccionado, texto rojo [2] -->
<div class="bar">Hello Bar</div>       <!-- No seleccionado, texto verde [3] -->

Un post en inglés con datos de referencia

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.