CODEWITHSUNDEEP
javascriptjqueryhtmlcsspseudo-element
David Fernandez
David Fernandez

Reputation: 175

jQuery: how to select all elements that are pseudo-elements having :before or :after?

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")
});

Upvotes: 4

Views: 2540

Answers (3)

techfoobar
techfoobar

Reputation: 66693

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

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

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

Upvotes: 0

Moin Zaman
Moin Zaman

Reputation: 25465

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.

Upvotes: 1

Related Questions