Question

I know how to select elements by attribute like this:

<input value="myvalue" />
$('input[value="myvalue"]')

But how it is possible to select dom elements with specified css rules set.
For example i need to select all elements with css “background-position” set;

Answer 1

There doesn’t appear to be a jQuery selector for this, but you could use a .filter() to reduce a selector to suit your needs:

$('div').filter(function() {
    return ($(this).css('backgroundPosition')); // tests for existence
});

However, the problem here is that even if ‘background-position’ isn’t set, some browsers set it to default values. You’ll have to compare against those default values, but you won’t be able to tell if those values were explicitly set in a stylesheet or not.

(Update: IE8 returns $(this).css('backgroundPosition') as “undefined” no matter what. The workaround is to test for ‘backgroundPositionX’ and/or ‘backgroundPositionY’ individually. However, while the defaults should be “0%”, IE8 reports a default of “0px” instead. Test for both.)

(Update 2: Firefox doesn’t return individual properties, only combined ‘background-position’; IE8 doesn’t return combined, only individual. Webkit will do both.)

$('div').filter(function() {
   return ($(this).css('backgroundPosition') !== "0% 0%" // firefox, webkit
        && $(this).css('backgroundPositionX') !== "0px"  // ie8
        && $(this).css('backgroundPositionY') !== "0px");
});

http://jsfiddle.net/mblase75/s8dx2/23/