CSS: Apply style only to a combination of two classes but no other classes

Question

Following is what i am using to inject a style which needs to be applied to a Div which has a combination of these two styles : .noindex and .ms-wpContentDivSpace

<script>
$(document).ready(function(){
$('.noindex, .ms-wpContentDivSpace')..css({
   overflow: auto,
   height : '150px'
});
});
</script>



<style> 
    .autoScrolListViewWP 
    {   
        HEIGHT: 150px; 
        OVERFLOW: auto 
    } 
</style>
<script> 
    $(document).ready
    (
        function()
        { 
            $('.noindex, .ms-wpContentDivSpace').addClass('autoScrolListViewWP');
        }
    );
</script>

Well but what I need is that above new CSS autoScrolListViewWP should get added to only those element where css combination is just for these two classes .noindex and .ms-wpContentDivSpace

But above script would apply style to any combination of css where those two class exists. E.g. .ms-WPBody , .noindex and ms-wpContentDivSpace autoScrolListViewWP

My question is how do i identify only a spcific combination of CSS classes ?

Do you mean [http://stackoverflow.com/questions/2554839/select-css-based-on-multiple-classes](http://stackoverflow.com/questions/2554839/select-css-based-on-multiple-classes)? Then: `.noindex.ms-wpContentDivSpace`. — Jeroen, Jan 30 '13 at 14:48
`$('.noindex, .ms-wpContentDivSpace')..css({` why is there double dot? — Dharman, Jan 30 '13 at 14:49
I need to just target a combination of only those two CSS classes I.e. .noindex and .ms-wpContentDivSpace. I don't want to set height to 150x adn auto scroll for Div which hare other css classe than those two. — Nikhil Vaghela, Jan 30 '13 at 15:03
Here the fiddle of my edit, you can check that it work: [JsFiddle](http://jsfiddle.net/toroncino/CQw9a/) — Andrea Turri, Jan 30 '13 at 15:13
see my reply to your answer, your answer is close but failed in case combination is 'b a c' instead of 'a b c' as you mentioned in your jsfiddle http://jsfiddle.net/CQw9a/1/ — Nikhil Vaghela, Jan 31 '13 at 06:02

Andrea Turri · Answer 1 · 2013-01-30T15:14:08.120

1

Edit of my previous code:

$("[class*='.noindex .ms-wpContentDivSpace']").addClass('autoScrolListViewWP');

This should work.

edit: it work, see example: JsFiddle

edited Jan 30 '13 at 15:14

answered Jan 30 '13 at 14:50

Andrea Turri

6,480
7
37
63

`*` in general is bad for performance as it will parse every single element in the dom. Filters tend to be slower than average as well, at least on older browsers – Luca Jan 30 '13 at 14:55
Thanks, but this did not work for me, it still applies style to element where apart from .noindex .ms-wpContentDivSpace i have additional classes. – Nikhil Vaghela Jan 30 '13 at 15:02
@Luca. Read what I wrote plz... I used * because I DONT KNOW WHICH ELEMENT HE USED!!! – Andrea Turri Jan 30 '13 at 15:03
my comment was just a note about using it, not a criticism. Other people might see it and use it without realizing the impact it has. I've read what you wrote and you have no need to scream. – Luca Jan 30 '13 at 15:08
if someone read what I wrote he use the element and not the `*`. You didn't read! – Andrea Turri Jan 30 '13 at 15:09
to reiterate my point, the answer itself it's not wrong and I do not think deserves a downvote too. – Luca Jan 30 '13 at 15:09
Hi Andrea, thanks this is really close but this failed in my case where if i have 'b a c' instead of 'a b c', see my update here http://jsfiddle.net/CQw9a/1/ – Nikhil Vaghela Jan 31 '13 at 06:00

score 1 · Accepted Answer · answered Jan 31 '13 at 06:15

1

A solution is to get all the elements with the two classes, then iterate through them and see if they have other classes. I.e:

$('.noindex.ms-wpContentDivSpace').each(function(i, elem) {
    var classes = elem.className.split(/\s+/);
    if (classes.length === 2) { // they should have only these two classes
        $(elem).addClass('autoScrolListViewWP');
        // alternatively elem.className += ' autoScrolListViewWP'; (untested)
    }
});

answered Jan 31 '13 at 06:15

akhaku

1,107
7
16

This seems to be helping, but is it an expensive operation to loop through? or this is the only way out for this problem ? – Nikhil Vaghela Jan 31 '13 at 11:13
Javascript is fast enough for me to not be super worried. There may be a flash of unstyled content, but IMO this is the best you can do under the circumstances – akhaku Feb 01 '13 at 02:40
Ok. I also found another way were i observed that all those Divs i am interested in applying this additional styles are all starting with a unique ID ends with a digit E.g. WebPartWPQ1, WebPartWPQ2,..and so on. So another way for me was to use this selector $("[id^='WebPartWPQ']").addClass('autoScrolListViewWP'); But because the scope of these question was to select element via CSS classes, I am going to mark your answer as accepted. Thanks for the help Akhaku. – Nikhil Vaghela Feb 01 '13 at 06:45

Timothy Miller · Answer 3 · 2013-01-30T15:16:07.053

0

Just take out the space.

$('.noindex.ms-wpContentDivSpace').addClass('autoScrolListViewWP');

That will add a class only to an element with both the class noindex and ms-ContentDivSpace.

Yup, jQuery is pretty smart. It's just like using CSS.

Edit:

I didn't realize that you wanted to select the element if it has those two classes but no other classes. That's a little bit trickier.

If you know what class you don't want to include, then this is the easiest (and fastest) way:

$('.noindex.ms-wpContentDivSpace').not('.theClassYouDontWant').addClass('autoScrolListViewWP');

edited Jan 30 '13 at 15:16

answered Jan 30 '13 at 14:54

Timothy Miller

2,391
1
27
34

Thanks, but this did not work for me, it still applies style to element where apart from .noindex .ms-wpContentDivSpace i have additional classes – Nikhil Vaghela Jan 30 '13 at 15:06
Oh I see. Sorry, I didn't understand your question. – Timothy Miller Jan 30 '13 at 15:07
Edited. I hope that helps! – Timothy Miller Jan 30 '13 at 15:16
i don't know what other classes i need to exclude. So believe i can not go ahead wit the suggested approach. See Andrea Turri reply which is close but fails for one tricky situation. – Nikhil Vaghela Jan 31 '13 at 05:56

score 0 · Answer 4 · answered Jan 30 '13 at 14:54

0

try

$('.noindex.ms-wpContentDivSpace').addClass('autoScrolListViewWP');

that is the standard css trigger for an element who has both classes

answered Jan 30 '13 at 14:54

Luca

9,259
5
46
59

Milche Patern · Answer 5 · 2013-01-31T14:09:30.070

-2

In your jQuery call,

$('.noindex, .ms-wpContentDivSpace')..css({

means each of .noindex AND each of .ms-wpContentDivSpace

$('.noindex.ms-wpContentDivSpace')..css({

means .noindex AND .ms-wpContentDivSpace

edited Jan 31 '13 at 14:09

answered Jan 30 '13 at 14:51

Milche Patern

19,632
6
35
52

CSS: Apply style only to a combination of two classes but no other classes

5 Answers5