How to change the style of multiple elements using jQuery?

Question

I have one CSS stylesheet with the following rules:

h1, h2, h3, h4, .contentheading, .title{ font-size: 13px ; font-weight: normal; font-family: Arial, Geneva, Helvetica, sans-serif ; } 

Tags, classes are generated by the plugin, so I can not add one class to it.

So, is it possible to somehow change the styles of all elements at once, at run time, that are not interconnected through one?

Answer 1

You can do multiple selectors in jQuery, like in Css. This may not be the best result, but it will work.

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

Answer 2

It is very simple with jQuery. Just use the selectors in question as your jQuery selectors, and then change the css. So the JavaScript / jQuery code will be like this if you want to change font-size and font-weight :

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

It sounds like you are new to jQuery, you might want to check out the docs and api .

Answer 3

In CSS:

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

Answer 4

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

Answer 5

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

 $('*').css(); 

In CSS, you can simply use the same selector * to apply some styles to all elements, but be sure to place it last from the CSS file to override all other rules.

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