jQuery (::after) selector issue

Question

In a css style I have the following

.back::after  {
    content: "";
    background-image: url(../images/patch.png);
    background-repeat: repeat;
    opacity: 0.6;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;

}

anyway using jQuery : $(".back ::after").css("opacity","0.9") to select the ::after element to change opacity doesnt work ! any idea how to do this ?

You can't select it because pseudo elements don't exist in the DOM. — Josh Crozier, Mar 09 '14 at 18:33

score 4 · Answer 1 · answered Mar 09 '14 at 18:36

4

As already mentioned, you cannot target the pseudo-elements, because they don't really exist in the DOM.

You could simply add an additional CSS rule and target the related element instead:

.back.focus::after  {
    opacity: 0.9;
}

and

$('.back').addClass('focus');

answered Mar 09 '14 at 18:36

Felix Kling

795,719
175
1,089
1,143

this is a neat work around :) +1 – ProllyGeek Mar 09 '14 at 18:37

score 0 · Answer 2 · answered Mar 09 '14 at 18:36

0

Try just using one colon, i.e.: .back:after. Leave a comment if it still doesn't work.

answered Mar 09 '14 at 18:36

Chris M

209
1
3

1

That's not the issue in this case. Even with one colon, it still won't work. – Josh Crozier Mar 09 '14 at 18:36
1

You might want to read up on `::after` and `:after`: https://developer.mozilla.org/en-US/docs/Web/CSS/::after. Basically in CSS3, pseudo-elements start with `::` and pseudo-selectors with `:`. – Felix Kling Mar 09 '14 at 18:40
Thanks both. I've learnt something! – Chris M Mar 09 '14 at 18:42

score 0 · Accepted Answer · answered Mar 09 '14 at 19:03

0

well , thanks for the neat solutions , but i think this one fits me the most as i can control it easily , injecting my own style dynamically and removing it.

document.styleSheets[0].insertRule('.back::after { opacity: 0.9 !important; }', 0);

answered Mar 09 '14 at 19:03

ProllyGeek

15,517
9
53
72

jQuery (::after) selector issue

3 Answers3