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 ?

Answer 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)
    }
});