Select all elements that have a specific CSS, using jQuery

Question

How can I select all elements that have a specific CSS property applied, using jQuery? For example:

.Title
{
    color:red;
    rounded:true;
}

.Caption
{
    color:black;
    rounded:true;
}

How to select by property named "rounded"?

CSS class name is very flexible.

$(".Title").corner();
$(".Caption").corner();

How to replace this two operation to one operation. Maybe something like this:

$(".*->rounded").corner();

Is there any better way to do this?

Solution 1

You cannot (using a CSS selector) select elements based on the CSS properties that have been applied to them.

If you want to do this manually, you could select every element in the document, loop over them, and check the computed value of the property you are interested in (this would probably only work with real CSS properties though, not made up ones such as rounded). It would also would be slow.

Update in response to edits — group selectors:

$(".Title, .Caption").corner();

Solution 2

This is a two year old thread, but it was still useful to me so it could be useful to others, perhaps. Here's what I ended up doing:

var x = $('.myselector').filter(function () { 
    return this.style.some_prop == 'whatever' 
});

not as succinct as I would like, but I have never needed something like this except now, and it's not very efficient for general use anyway, as I see it.

Solution 3

Thank you, Bijou. I used your solution, but used the jQuery .css instead of pure javascript, like this:

var x = $('*').filter(function() {
    return $(this).css('font-family').toLowerCase().indexOf('futura') > -1
})

This example would select all elements where the font-family attribute value contains "Futura".

Solution 4

Similar as Bijou's. Just a little bit enhancement:

$('[class]').filter(function() {
    return $(this).css('your css property') == 'the expected value';
  }
).corner();

I think using $('[class]') is better:

• no need to hard code the selector(s)
• won't check all HTML elements one by one.

Here is an example.

Solution 5

Here is a clean, easy to understand solution:

---

// find elements with jQuery with a specific CSS, then execute an action
$('.dom-class').each(function(index, el) {
    if ($(this).css('property') == 'value') {
        $(this).doThingsHere();
    }
});

This solution is different because it does not use corner, filter or return. It is intentionally made for a wider audience of users.

Things to replace:

1. Replace ".dom-class" with your selector.
2. Replace CSS property and value with what you are looking for.
3. Replace "doThingsHere()" with what you want to execute on that found element.

Good luck!

View more solutions

Comments

[Yinda Yin]

@Quentin: Is this answer correct? See stackoverflow.com/questions/10651508 and api.jquery.com/css and meta.stackexchange.com/questions/132958/…

[Quentin]

@RobertHarvey — Yes it is. Note that in paragraph 1 I qualify the impossibility of it with "using a CSS selector". Paragraph 2 describes a work around. The linked to question has a number of answers, but the ones with positive voting scores are examples of the work around I described.

[radu.luchian]

Yup, this one worked for me as well. I saved a working jsfiddle of it, for future reference.

[Thirumalai Parthasarathi]

you just saved me from my 3 hours long mind-ache.. +1 for that

[Janus Bahs Jacquet]

This in no way answers the question.

[Mikko Rantalainen]

That optimization is not generic enough if you have selectors such as div.special > span > a.

[Vishnu Narang]

While this works, just note that this is a very heavy operation depending on the DOM size. If you need it only for a section of the page, then constraint the scope to that. If you need this for the entire page, then you probably need to change this at the css level and not through JS.

[kintsukuroi]

someone censored and removed the "Good luck!" ending of my post. So now I can't wish people good luck? I have rolled back my answer.