How can I change the style of multiple elements using jQuery?

Question

I have one CSS style sheet with rules like this:

h1, h2, h3, h4, .contentheading, .title{

 font-size: 13px ;
 font-weight: normal;
 font-family: Arial, Geneva, Helvetica, sans-serif ;
}

The tags, classes are generated by plugin so i can't add a single class to it.

So, is there any way that I can change the styles of all elements at once, at runtime, that doesn't involve going through them one by one?

Answer 1

You can do multiple selectors in jQuery just like in Css. Maybe not the best performance-wise but will work.

$('h1, h2, h3, h4, .contentheading, .title').css('color', 'red');
$('h1, h2, h3, h4, .contentheading, .title').addClass('someOtherClass');

Answer 2

In CSS:

* {
    font-size: 13px;
    font-weight: normal;
    font-family: Arial, Geneva, Helvetica, sans-serif;
}

Answer 3

$('h1,h2,h3,h4,.contentheading,.title').css({ 'color': '#fff' });

Answer 4

Since this question is tagged jQuery, using the * selector should help you to get all elements. Then you can use the css method to change the styles.

$('*').css();

In CSS you can just use the same * selector to apply some styles to all elements, but make sure you put it last of the CSS file so as to override all other rules.

* {
    font-size: 13px;
    font-weight: normal;
    font-family: Arial, Geneva, Helvetica, sans-serif;
}

Answer 5

This is very simple with jQuery. Simply use the selectors in question as your jQuery selectors, then change the css. So the JavaScript/jQuery code would be this, assuming you wanted to change the font-size and font-weight:

$('h1, h2, h3, h4, .contentheading, .title').css({
  'font-size': '17px',
  'font-weight': 'bold'
});

It sounds like you're new to jQuery, you probably want to get familiar with the docs and api sites.