Select all elements with specific CSS using jQuery

Question

How can I select all elements with a specific CSS property using jQuery? For example:

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

How to choose a property named "rounded"?

The CSS class name is very flexible.

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

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

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

Is there a better way to do this?

Answer 1

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

If you want to do this manually, you can select each element in the document, iterate over them and check the calculated value of the object you are interested in (this will probably only work with real CSS properties, but not done for example, rounded ). It would also be slow.

Update in response to changes - group selector :

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

Answer 2

This is a two-year stream, but it was still useful to me so that it could be useful to others. Here is what I did:

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

not as concise as we would like, but I never needed something like this except now, and it is not very effective for general use, as I see it.

Answer 3

Thanks, bijou. I used your solution, but used jQuery.css instead of pure javascript, for example:

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

In this example, all elements in which the value of the font-family attribute contains "Futura" will be selected.

Answer 4

Similar to Bijou's. Just improved a bit:

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

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

• No need to hardcode selector (s)
• will not check all HTML elements one by one.

Here is an example.

Answer 5

Here is a clean, clear 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 in that it does not use angle, filter or return. It is intended for a wider audience of users.

What needs to be replaced:

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

Answer 6

Custom CSS properties are not inherited, so they should be applied directly to each element (even if you use js to dynamically add properties, you must do this by adding a class), so ...

CSS

 .Title { color:red; } .Caption { color:black; } 

HTML

You do not need to define the rounded: true property at all. Just use the presence of the rounded class:

 <div class='Title Rounded'><h1>Title</h1></div> <div class='Caption Rounded'>Caption</div> 

Js

 jQuery( '.Rounded' ).corner();