4

in jQuery or basic javascript is posible to get all elements with :after or :before pseudo-element?

I know getcomputedstyle, but this return all elements with or without :before or :after pseudo-element.

Thanks

EDIT:

Something like:

$("a:before").each(function () {
  console.log("element with :before pseudo-element")
});
David Fernandez
  • 175
  • 9

3 Answers3

1

Nope. Generated content elements are not really part of the DOM. You can't directly hook into them using JS. They are for presentation only.

You can do things to actual elements that may be parents or siblings etc. of the pseudo-elements and change them that way.

Looking at the question BoltClock linked to below, maybe you could set a common attribute to all pseudo-elements and then try and select them with jquery based on this attribute.

Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
  • @refhat: [Yes.](http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery) (This seems like a different question, though...) – BoltClock Jul 16 '12 at 11:39
0

Give the 'a' tags you want to select a class such as 'has-before' and hook on to them that way?

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
0

It is possible but in a round-about way!

Check this demo: http://jsfiddle.net/BE47z/1/

The logic goes like:

  1. Enumerate all classes that have a :before or an :after definition in CSS - this is done by traversing the document.styleSheets object (you can change the code to only catch :before or :after etc.. as needed)
  2. Once you get the class list, remove the part after : its name in CSS, for ex: .a:before becomes .a
  3. Now you can get all elements matching those classes

Code

HTML

<div class="element classWithoutBefore">No :before</div>
<div class="element classWithBefore">Has :before</div>
<div class="element class2WithBefore">Has :before</div>
<div class="element class2WithoutBefore">No :before</div>

CSS

.classWithoutBefore {

}

.class2WithoutBefore {

}

.classWithBefore:before {

}

.class2WithBefore:before {

}

.a:before, .b:before {

}

JS

var sheets = document.styleSheets;
var pseudoClasses = [], i = 0, j = 0;
for (i=0; i<sheets.length; i++) {
    try {
        var rules = sheets[i].cssRules;
        for (j=0; j<rules.length; j++) {
            if(rules[j].selectorText.indexOf(':before') != -1 || rules[j].selectorText.indexOf(':after') != -1) {
                pseudoClasses.push(rules[j].selectorText);
            }
        }
    }
    catch(ex) { // will throw security exception for style sheets loaded from external domains
    }
}

var classes = [];
if(pseudoClasses.length > 0) {
    pseudoClasses = pseudoClasses.join(',').split(','); // quick & dirty way to seperate individual class names
    for (i=0; i<pseudoClasses.length; i++) { // remove all class names without a : in it
        var colonPos = pseudoClasses[i].indexOf(':');
        if(colonPos != -1) {
            classes.push(pseudoClasses[i].substring(0, colonPos));
        }
    }
}

// Elements with the classes in the 'classes' array have a :before or :after defined
techfoobar
  • 65,616
  • 14
  • 114
  • 135
  • 1
    `:hover` is a pseudo-class and not the same kind of selector as `:before` or `:after` which are pseudo-elements. There's no such thing as a "pseudo". **Please don't get them mixed up.** – BoltClock Jul 16 '12 at 16:01
  • Yes. The script is for blindly picking up anything with a : in the css definition and using that to match the elements. So called it just `pseudo` generically (which is a wrong way).. But yes, they are totally unrelated i know. The script above should be edited (especially the indexOf part where the matching is done) by the OP to suit his needs as i pointed out.. :) – techfoobar Jul 16 '12 at 16:07