How to Set the Universal CSS Selector with JavaScript

How to set the universal CSS selector with JavaScript?

getElementsByTagName("*") will return all elements from DOM. Then you may set styles for each element in the collection:

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

Use the CSS Universal Selector '*' with javascript?

Here is a simple sample to start with and it iterates through the body's elements.

<!DOCTYPE html><html><body>
<h2 class="example" style="padding:50px;" >A heading with class="example"</h2><p>Click the button to activate the universal selector.</p><button onclick="myFunction()">Try it</button><script>function myFunction() {  var els = document.body.querySelectorAll("*");  for (var i = 0; i < els.length; i++) {    els[i].style.margin = 0;    els[i].style.padding = 0;  }}</script>
</body></html>

Javascript add universal selector CSS rule via click on element - OR update universal selector rule to have class name

You can add/remove a class on body

body.debug * { border: 1px dashed pink; }

for a bonus, you can also exclude items (such as your debug button) if needed:

$("#debug").click(function() { $("body").toggleClass("debug"); });

body.debug :not(.nodebug) { border: 1px dashed pink; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>basic element</div>
<div><div>nested element</div></div>
<hr class='nodebug' />
<button type='button' id='debug' class='nodebug'>debug</button>
</body>

Title and Universal Selector (*) in Javascript CSS/HTML5

Just add a <caption> element inside the table:

document.write('<div style="width:auto; margin:10px;"><table style="background-
color:purple;" border="1" cellspacing="1" cellpadding="35"><caption>Title</caption>')

for the * universal selector I believe you want css:

<style type="text/css">
    *{
        font-size: 12px;
    }
</style>

Is possible to use $(this) and universal selector (*)?

You can either use find()

$(this).find('*').attr('style','');

or the context selector

$('*', this).attr('style','');

to do the same thing as $('#element *') with this

If the element represented by this should be part of the collection, you can add it back

$(this).find('*').addBack().attr('style','');

I tend to agree with Rory McCrossan in the comments, using a parent element and external styles would be preferable to changing the style attribute on multiple elements

.element.styled * { /* styles for all children */ }

then just

$('.element').removeClass('styled')

to remove the styles on the children

css universal selectors for all custom columns

The [attribute^=value] selector matches every element whose attribute value begins with a specified value.

[class^="col-"]{
    width: 33%;
}

Note:use !important for overlapping, like this:width:33%!important;

Why would a universal CSS selector (*) override an inline style?

The "style" property on the <body> tag only affects content that's in the body directly. All the various <div> and <span> and etc. tags in your HTML are matched by the CSS rule. (Without that * rule then the natural behavior is for font information to be inherited; inheritance doesn't happen for all CSS properties however.)

What I've seen recommended instead is to set everything to "inherit" and then apply the setting to the <body>:

body { font-family: Whatever; }
*, *::before, *::after { font-family: inherit; }

That allows you to have overrides for some elements (like various sorts of form widgets or whatever).

How to Set the Universal CSS Selector with JavaScript