Question

I have a jQuery function that re-sizes font-size and line-height for many elements in a page, including p and p.latest_news. The function works as expected with all other elements, except with p.latest_news

The font-size and line-height being applied to p.latest_news equal the p no class (i.e. $('p').css({... )

jQuery.1.7.1

CODE

    $('p.article_news').css({
            'font-size' : Math.max(11,(.9 * newFontSize)),
            'line-height' : Math.max(13,(1.1 * newFontSize))+'px'
            });
    $('p').css({
            'font-size' : Math.max(14,newFontSize),
            'line-height' : Math.max(21,(1.7 * newFontSize))+'px'
            });

if I only use

    $('p.article_news').css({
            'font-size' : Math.max(11,(.9 * newFontSize)),
            'line-height' : Math.max(13,(1.1 * newFontSize))+'px'
            });

p.article_news font-size and line-height change as expected

Why is this happening?
How can I affect each p, class and classless?

Thank you

Answer 1

You are setting the article_news font size then changing it again with your second selector.

What you need is:

$('p.article_news').css({
        'font-size' : Math.max(11,(.9 * newFontSize)),
        'line-height' : Math.max(13,(1.1 * newFontSize))+'px'
        });
$('p:not(.article_news)').css({
        'font-size' : Math.max(14,newFontSize),
        'line-height' : Math.max(21,(1.7 * newFontSize))+'px'
        });

the :not() selector is basically selecting all p nodes that do not have the class .active_news.