¿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.
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidad¿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.
Al ser ::after
un pseudoelemento y no existir en el DOM, es practicamente imposible usar directamente ese selector en jQuery.
Una solución típica a este problema es jugar con las clases (agregar o quitar según lo que se quiera hacer):
$('button.click1').click(function() {
$('.page-container .single-page:nth-of-type(2)').addClass('click1').removeClass('click2');
});
$('button.click2').click(function() {
$('.page-container .single-page:nth-of-type(2)').addClass('click2').removeClass('click1');
});
.page-container .single-page:nth-of-type(2)::after {
content: 'Adios';
}
.page-container .single-page.click1:nth-of-type(2)::after {
background-color: blue;
color: white;
}
.page-container .single-page.click2:nth-of-type(2)::after {
background-color: red;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-container">
<div class="single-page">
Hola
</div>
<div class="single-page">
me fui
</div>
</div>
<button class="click1">Fondo azul</button>
<button class="click2">Fondo rojo</button>
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
$(function() {
$('button').click(function() {
$('.page-container .single-page:nth-of-type(2)').addClass('clase1');
});
});
.page-container .single-page::after {
content: ' ';
display: block;
width: 40px;
height: 20px;
margin: 10px;
background-color: red;
}
.page-container .single-page:nth-of-type(2)::after {
background-color: violet;
}
.page-container .single-page:nth-of-type(2).clase1::after {
background-color: blue;
}
.page-container .single-page:nth-of-type(2).clase2::after {
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-container">
<div class="single-page"></div>
<div class="single-page"></div>
<div class="single-page"></div>
<div class="single-page"></div>
<button type="button">Haz click</button>
</div>
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
$(function() {
$('button').click(function() {
var color = $('#color').val();
$('.page-container .single-page:nth-of-type(2) :last-child').css({
'background-color': color
});
});
});
.page-container .single-page .after {
content: ' ';
display: block;
width: 40px;
height: 20px;
margin: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>Escriba un color</label>
<input id="color" type="text">
<button type="button">Cambiar</button>
</div>
<small>Ej blue, orange, #00f0e1</small>
<div class="page-container">
<div class="single-page">
<span class="after"></span>
</div>
<div class="single-page">
<span class="after"></span>
</div>
<div class="single-page">
<span class="after"></span>
</div>
<div class="single-page">
<span class="after"></span>
</div>
</div>
CSS
del pseudoelemento, pero solo lo podría hacer desde JavaScript, que es donde conozco el valor a aplicar. En concreto, es el nombre de una imagen para poner de background, lo cual podría ser cualquier cosa (carga dinámica). Me temo que solo me queda la opción de Reemplazo.
el 26 oct. 2016 a las 14:43