changing the css of pseudoclasses of elements with jquery is it possible?

Question

changing the css of pseudoclasses of elements with jquery is it possible?

Navigation

#1 by (1 votes)

0

I'm doing some testing with jquery , and I came up with the following question:

Is it possible to manipulate pseudoelements of css classes with jquery ?

$('#login_1').click(function(event){
    event.preventDefault();
    if($('#principal-modais').css('display') == 'none') {
        $('#principal-modais').css({'display':'inline-block'});
        $('html').addClass('modais-ativos');
        setTimeout(function(){
            $('.modais-ativos:after').css({'background-color':'rgba(0,0,0,.7)'});
            $('#principal-modais').css({'opacity':1});
        },100);
    }
});
$('#fecha-modais').click(function(event){
    event.preventDefault();
    if($('#principal-modais').css('display') != 'none') {
        $('#principal-modais').css({'opacity':0});
        $('.modais-ativos:after').css({'background-color':'rgba(0,0,0,0)!important'});
        setTimeout(function(){
            $('#principal-modais').css({'display':'none'});
            $('html').removeClass('modais-ativos');
        },1000);
    }
});

Then I performed the above code as a test, but without success, if it is possible to access the element / class selectors, how could it be done?

jquery css seletores

asked by anonymous 02.02.2017 / 18:45

1 answer

How to prevent the redirection of a link and even change the url? [duplicate] How to load images after scrolling when they are in view-port?

score 1 · Accepted Answer

You can not manipulate why technically psudoclasses is not a part of the DOM, so it's inaccessible by javascript. There are other ways to do this, several of them listed here , I particularly prefer and use method 1, where you use separate classes and at the time of the change do a toggle of the classes:

HTML

<span class="modais-ativos preto">

CSS

.preto::after {
    background-color: rgba(0,0,0,0)
}
.outro-preto::after{
     background-color: rgba(0,0,0,.7)
}

Javascript

setTimeout(function(){
    $('.modais-ativos').removeClass('preto').addClass('outro-preto');
},100);

SOen reference.