I would like to know if it is possible to modify the "*" selector of css by means of javascript or jquery.

For example, I have the following:

* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}

And I need to modify by means of javascript or jquery "font-family".

I would like to know if it is possible to modify the "*" selector of css by means of javascript or jquery.

For example, I have the following:

* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}

And I need to modify by means of javascript or jquery "font-family".

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 28, 2019 at 3:31 user10631553user10631553 2

• You could append a new rule programmatically, but it may be just simpler to set this rule on a mon ancestor, like document.documentElement or document.body since font-family is an inherited property. – Kaiido Commented Jan 28, 2019 at 3:36
• document.body.childNodes – Cuong Hoang Commented Jan 28, 2019 at 3:37

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Technically, * selects all elements. So, all HTML elements should be in the body, right? So, when you change it, change the whole body instead of all elements.

$('body').CSS({'font-family':})

or

$('*').CSS({'font-family':})

First of all you should select the elements of DOM. Then we can do anything what we want by using javascript as follows.

getElementsByTagName("*") will return all elements from DOM.

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // Change any style you want 
    // Ex- element.style.border = ...
}

Ref : https://www.w3schools./jsref/met_document_getelementsbytagname.asp

Just the same stuff your selector would be *...

So do $("*").css({"font-family": "Arial"}); if using jQuery...

But pure JavaScript, you can do:

document.querySelectorAll("*").forEach(el => el.style.fontFamily = "Arial");

You can have access to your style sheets fom JS and change them directly (not by filter/change any html nodes) more info here.

let rules=document.styleSheets[0].cssRules;

let rule= [...rules].find(r=> r.selectorText=="*" );

rule.style.fontFamily="cursive";

* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
font-family: 'Roboto', sans-serif;
}

Example test

<div style="font-family: 'Roboto'">No font change</div>

You could do the following in pure Javascript:

 var everything = document.querySelectorAll("*");

 for(var i=0; i < everything.length; i++) {
     everything[i].style.fontFamily = "Arial";
     //add your CSS styles here
 }

This will loop through every element in the DOM and add the CSS.

Or if you are using Jquery, there is way easier method to do it. See below

  $("*").css("font-family","Arial");

or just simply style the body

$("body").css("font-family","Arial");

Try this

$("*").css({"font-family": "your-font"});