3

Me encuentro aprendiendo CSS y tengo una duda en un selector si pudieran iluminarme un poco se los agradecería.

Procedo con el código para que le echen un vistazo:

/* Esto es un selector descendiente */
    
div .pdescendiente{
    background-color: yellowgreen;
}
<div>
    <p class="pdescendiente">Esto es un párrafo dentro de un div</p>
    <h1>Esto es un h1 dentro de un div</h1>
    <p>Este es otro p dentro de un div junto con un Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa, impedit harum ipsam consectetur voluptatum optio doloremque? Laboriosam accusantium rem similique quidem sequi nisi, repellendus quisquam dicta delectus eligendi culpa ipsa!</p>
</div>
<!-- Tenemos el mismo párrafo, con la misma clase pero este no se 
    pinta por que estamos utilizando un selector descendiente para
    el otro-->
<p class="pdescendiente">Esto es un párrafo fuera de un div</p>

Mi duda es: ¿Qué pasaría si yo tuviera otro div, cómo identificaría el código css al div adecuado?, o ¿Lo hace mediante la clase siguiente?, en mi caso .pdescendiente. O en ese caso ¿Debería agregar un id o clase al div?.

De ante mano muchas gracias.

1 respuesta 1

1

En CSS se aplican los estilos a todos los elementos que cumplan la condición del selector, en este caso, si tu declaras:

div .pdescendiente{
    background-color: yellowgreen;
}

Ese estilo será aplicado a todos los elementos que tengan la clase .pdescendiente que estén dentro de un div (no necesariamente deben ser hijos directos de ese div).

Mientras más específico sea el selector, más prioridad tendrá el estilo, por ejemplo:

div .pdescendiente {
    color: red;
}

div.ejemplo-clase .pdescendiente {
    color: blue;
}
<div class="ejemplo-clase">

  <p class="pdescendiente">
    Ejemplo 2
  </p>
  
</div>

<div>

  <p class="pdescendiente">
    Ejemplo 1
  </p>
  
  <article>
    <p class="pdescendiente">
      Ejemplo 3
    </p>
  </article>
  
</div>

Ejemplo 2 será azul
Ejemplo 1 y Ejemplo 3 serán rojos

Tu Respuesta

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

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