0

Tengo texto en un elemento <p> que es hijo de un <article>. Con CSS al entrar este elemento <article> en la pseudo-clase :active tiene que heredar el contenido del <p> a un elemento hermano. Es posible realizarlo con CSS o tendre que usar JS?

.containerC__day--anim {
  background-color: gold;
  height: 100px;
  width: 100px;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: scale(0.15);
}

.containerC__day:active ~ .containerC__day--anim {
  top: 15%;
  left: 35%;
  
  height: 35%;
  width: 35%;
  background-color: #9ddec5;
  box-shadow: 0px 0px 700px 72px rgba(0, 0, 0, 0.68);
  border: 1px solid black;
  
  transform: scale(1);
  transition: transform 0.5s ease;
}
<section class="containerC">
  <article class="containerC__day day1 border-left">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="containerC__day--anim">
    <p></p>
  </article>
</section>

1
  • ¿Qué es lo que quieres hacer? ¿Y cómo quieres usar el texto en el segundo artículo? Parecería un editor de texto con vista previa, pero no termino de entender el por qué de copiar con CSS de un artículo a otro. ¿Sólo quieres que se muestre? (para lo que no necesitarías el segundo artículo) ¿O quieres copiar el texto literalmente de uno a otro? (para lo que necesitaríass más que CSS).
    – Alvaro Montoro
    Commented el 28 feb. a las 18:27

1 respuesta 1

0

Copiar no creo que se pueda, y además sería extraño poder heredar de hermanos (más bien primos en tu caso).

La herencia en CSS funciona en las propiedades no en el contenido, por lo que podrías declarar tu propiedad personalizada y heredar de ella, algo así:

@property --texto{
  syntax: "<custom-ident>";
  inherits: true;
  initial-value: "";
}

.containerC__day > p:after, .containerC__day:active ~ .containerC__day--anim p:after{
  content: var(--texto)
}
<section class="containerC" style="--texto:'Lorem ipsum dolor sit amet consectetur adipisicing elit.'">
      <article class="containerC__day day1 border-left">
        <p></p>
      </article>
      <article class="containerC__day--anim">
        <p></p>
      </article>
</section>

Otra manera sería simplemente duplicar el texto y mostrarlo/esconderlo según sea el caso

.containerC__day ~ .containerC__day--anim p{
  display: none;
}
.containerC__day:active ~ .containerC__day--anim p{
  display: unset;
}
<section class="containerC" >
      <article class="containerC__day day1 border-left">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </article>
      <article class="containerC__day--anim">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </article>
</section>

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.