Organizational Research By

Surprising Reserch Topic

select all elements that have a specific css using jquery


select all elements that have a specific css using jquery  using -'javascript,jquery,css,jquery-selectors'

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?
    

asked Sep 14, 2015 by RosLofton
0 votes
64 views



Related Hot Questions

5 Answers

0 votes

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();
answered Sep 14, 2015 by ChoMedworth
0 votes

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

$('*').filter(function(){ return $(this).css('font-family').toLowerCase().indexOf('futura') > -1 })
answered Sep 14, 2015 by AlannaSerrax
0 votes

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.

answered Sep 14, 2015 by JannetteDion
0 votes

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.

answered Sep 14, 2015 by MildredOmgxc
0 votes

Custom CSS properties aren't inherited, so must be applied directly to each element (even if you use js to dynamically add properties, you should do it by adding a class), so...

CSS

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

You don't need to define a rounded:true property at all. Just use the presence of the 'Rounded' class:

Title

Caption

JS

jQuery( '.Rounded' ).corner();
answered Sep 14, 2015 by LawBriggs

...