Estilar un pseudoelemento ::after con jQuery

publicado por: Anonymous

¿Cómo seleccionar desde jQuery un elemento de este estilo?

.page-container .single-page:nth-of-type(2)::after { }

La idea es poder modificar ciertas reglas CSS desde JavaScript.

solución

Desde javascript es imposible dar estilo a las pseudoclases y a los pseudoelementos porque estas reglas no son parte del DOM.

Para solventar dicha limitación tienes varias opciones

Agregar especificidad

Agregas una clase a tu hoja de estilos, ej .clase1

_x000D_

_x000D_

$(function() {_x000D_
  $('button').click(function() {_x000D_
    $('.page-container .single-page:nth-of-type(2)').addClass('clase1');_x000D_
  });_x000D_
});

_x000D_

.page-container .single-page::after {_x000D_
  content: ' ';_x000D_
  display: block;_x000D_
  width: 40px;_x000D_
  height: 20px;_x000D_
  margin: 10px;_x000D_
  background-color: red;_x000D_
}_x000D_
.page-container .single-page:nth-of-type(2)::after {_x000D_
  background-color: violet;_x000D_
}_x000D_
.page-container .single-page:nth-of-type(2).clase1::after {_x000D_
  background-color: blue;_x000D_
}_x000D_
.page-container .single-page:nth-of-type(2).clase2::after {_x000D_
  background-color: orange;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="page-container">_x000D_
  <div class="single-page"></div>_x000D_
  <div class="single-page"></div>_x000D_
  <div class="single-page"></div>_x000D_
  <div class="single-page"></div>_x000D_
  <button type="button">Haz click</button>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Al tener más especificidad tendrá mayor prioridad y por tanto mostrará el estilo deseado. La desventaja es que la cantidad de modificaciones que puedes hacer desde javascript está limitada por la cantidad de clases que generes, es decir, este método es viable cuando las modificaciones sean discretas y no para hacer modificaciones arbitrarias.

Puedes usar también selectores de atributos y elementos como medio para agregar especificidad.

Reemplazo

Puedes reemplazar los pseudoelementos por elementos y estos si permiten ser manipulados

.page-container .single-page:nth-of-type(2) .after { 
    //estilos
}

Técnicamente los pseudo elementos ::before y ::after son el primero y último descendiente directo de un elemento dado y tu puedes crear un elemento que ocupe la misma posición y estilarlo

<div class="page-container">
    <div class="single-page">
        <span class="before"></span>
        <div class="contenido"></div>
        <span class="after"></span>
    </div>
</div>

Esto es un truco muy sucio por la cantidad de elementos que deberás generar y por supuesto tiene sus limitaciones como que es muy complejo reproducir todos los pseudoelementos como ::first-letter, ::first-line, etc, pero te permitirá agregar cualquier estilo arbitrario mediante javascript.

Si lo usas de esta forma puedes usar los selectores :first-child y :last-child para seleccionar los pseudoelementos “simulados”.

Para simular pseudoclases puedes usar eventos como hover y mousemove que también solventarán en parte el problema.

Chequea el ejemplo

_x000D_

_x000D_

$(function() {_x000D_
  $('button').click(function() {_x000D_
    var color = $('#color').val();_x000D_
    $('.page-container .single-page:nth-of-type(2) :last-child').css({_x000D_
      'background-color': color_x000D_
    });_x000D_
  });_x000D_
});

_x000D_

.page-container .single-page .after {_x000D_
  content: ' ';_x000D_
  display: block;_x000D_
  width: 40px;_x000D_
  height: 20px;_x000D_
  margin: 10px;_x000D_
  background-color: red;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div>_x000D_
  <label>Escriba un color</label>_x000D_
  <input id="color" type="text">_x000D_
  <button type="button">Cambiar</button>_x000D_
</div>_x000D_
<small>Ej blue, orange, #00f0e1</small>_x000D_
<div class="page-container">_x000D_
_x000D_
  <div class="single-page">_x000D_
    <span class="after"></span>_x000D_
  </div>_x000D_
  <div class="single-page">_x000D_
    <span class="after"></span>_x000D_
  </div>_x000D_
  <div class="single-page">_x000D_
    <span class="after"></span>_x000D_
  </div>_x000D_
  <div class="single-page">_x000D_
    <span class="after"></span>_x000D_
  </div>_x000D_
_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.