How do I access style properties of pseudo-elements with jQuery?

Question

For context, this is a followup to an earlier question. Rather than digging through cssRules, I'd like to base the logic on jQuery selectors that search for the effects of those rules.

Given default properties of

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
    /* ... */
}

that are selectively modified as in

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}

how can I select pseudo-elements whose respective background positions have default values? Copying the selector as in

GM_log("size = " + $(".commentarea .author:before").size());

matches nothing. Trying .siblings() with

$(".commentarea .author")
  .map(function(i) {
         GM_log($(this)
                  .siblings()
                  .map(function (i) { return $(this).css("background-image") })
                  .get()
                  .join(", "))
       });

produces only none values.

For full details, see the live page. Is this possible?

So basically you want to select `.class1 .class2` as long as the elements' background image and position are the default (based on the CSS rule)? — Chris Laplante, Sep 18 '10 at 21:12
@SimpleCoder I want to select `.class1 .class2` as long as *the neighboring pseudo-element's* background position is the default. — Greg Bacon, Sep 18 '10 at 21:18
@Greg Bacon; the `:before` and `:after` psuedo-elements are usually used to insert content (http://www.w3schools.com/CSS/pr_pseudo_before.asp). Is the CSS selector working? I've never seen it used like this. — Chris Laplante, Sep 18 '10 at 21:26
@Greg Bacon: I can still provide a solution however. By neighboring, do you mean in any direction? — Chris Laplante, Sep 18 '10 at 21:39
@joberror See the [live page](http://www.reddit.com/r/CFB/comments/dahaz/get_your_team_logo_here_with_rules/). — Greg Bacon, Sep 19 '10 at 01:57

score 6 · Accepted Answer · edited Oct 11 '11 at 20:09

You can't use the :before and :after pseudo-elements like this. The purpose of them is to insert content before and after (respectively) the selector you have specified.

Example usage:

HTML:

<span class='a'>
    Outer
    <span class='b'>
        Inner
    </span>
</span>

CSS:

.a .b:before {
    content: "|Inserted using :before|";
}

.a {
    color: blue;
}

.b {
    color: red;
}

Result:

http://jsfiddle.net/mzcp6/

What happened was that the text |Inserted using :before| was inserted before (well, really, prepended into) the inner span because it was class b and a descendant of an element of class a. Basically, :before and :after don't select; they modify.

Example:

This doesn't work as expected:

HTML:

<span class='a'>
    <p>More text</p>
    <span class='b'>
        <p>More text</p>
        Inner
    </span>
</span>

CSS:

.a .b:before {
    text-size: 100px;
}

Nothing happens:

http://jsfiddle.net/bQ2ty/

EDIT:

:before is not a valid jQuery selector: http://api.jquery.com/category/selectors/

I think you will need to use something other than :before or attempt to extract the original rule using the jQuery plugin: http://flesler.blogspot.com/2007/11/jqueryrule.html

I think it'll also be good to note that the content generated by `:before` and `:after` do not actually show up in the DOM (because they are purely presentational), thus, there really is no way to select them with jQuery. — Yi Jiang, Sep 19 '10 at 00:19
@Yi Jiang - Precisely; I noticed that too but failed to mention it. Thank you. — Chris Laplante, Sep 19 '10 at 00:22

How do I access style properties of pseudo-elements with jQuery?

1 Answers1

Linked

Related