How do I select this span?

Question

This my element that I want to select in jquery

.box3 span.info:before{
  content:"15 vacatures";
    margin:0;
    padding:0 0 28px 0;

    font-family: 'MaisonNeueMono';
    letter-spacing: normal;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    position:relative;
}

I tried this but it just doesn't select it, also doesn't work with just putting ".info": So how do I select this element?

$(".box3 span.info:before").hover(function(){
    $(".box3 h1").fadeOut();
});

possible duplicate of [Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after) — Szymon Toda, Sep 04 '14 at 12:39

score 1 · Accepted Answer · answered Sep 04 '14 at 12:34

1

Remove the :before,it is just the css part , it is not rendered with element, it is just use to add css before the element.

you just need to write this:

$(".box3 span.info").hover(function(){
    $(".box3 h1").fadeOut();
});

answered Sep 04 '14 at 12:34

Ehsan Sajjad

61,834
16
105
160

score 1 · Answer 2 · answered Sep 04 '14 at 12:34

The pseudo element before is not part of the selector, just leave it out:

$(".box3 span.info").hover(function(){
    $(".box3 h1").fadeOut();
});

Additionally you may want to separate the style & content insertion like this:

.box3 span.info {
    margin:0;
    padding:0 0 28px 0;

    font-family: 'MaisonNeueMono';
    letter-spacing: normal;
    font-weight: normal;
    font-size: 12px;
    text-transform: uppercase;
    position:relative;
}

.box3 span.info::before{ 
    content:"15 vacatures";
}

score 0 · Answer 3 · answered Sep 04 '14 at 12:36

0

You do not need psuedo selector here. you need to use:

$(".box3 span.info").hover(function(){
  $(this).closest('.box3').find('h1').fadeOut();
});

answered Sep 04 '14 at 12:36

Milind Anantwar

81,290
25
94
125

score 0 · Answer 4 · edited May 23 '17 at 12:21

0

You can't select pseudoelements with jQuery as those are not real DOM objects thus are not existing in jQuery context.

That said your :before pseudoelement can't be selected with jQuery.

If you need more explanation search on SO, example: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

edited May 23 '17 at 12:21

Community

1
1

answered Sep 04 '14 at 12:36

Szymon Toda

4,454
11
43
62

How do I select this span?

4 Answers4