Dynamically add attribute to css class instead of element

Question

I recently came across this scenario where I wanted to add css property to a class instead of an element.

When i do this

    $('.class_with_css').css({display:'none'});

It would add the style "display:none" to all the elements that has the class "class_with_css" currently. But in my case I had to apply "class_with_css" class to a new element after the above code was executed and want to retain this style addition. Is there a way to do this (something like add the property to the css class itself) without recalling the above function?

Eg.

1. two elements

    <div id=1 class="abc" ></div>
    <div id=2 class="abc" ></div>

2. Run the code

    $('.abc').css({display:'none'});

3. The element becomes:

    <div id=1 class="abc" style="display: none;"  ></div>
    <div id=2 class="abc" style="display: none;" ></div>

4. Now i add class abc to element like this

    <div id=3 class="abc" ></div>

Is there a way to make class "abc" to hold the style instead of element so that step 4's element also has display:none

Answer 1

No, there is no way to achieve what you want directly. The way it usually is done by already having css class with desired changes/properties and applying that class instead of css property.

So, you will have for example:

.hide {
    display: none
}

and add the class to elements:

$('.abc').addClass('hide');

UPDATE
Another option if you really want to dynamically add css class, would be the answer posted here

Answer 2

You can inject style to your header.

BUT REMEMBER From that point on. You have to use display: block; to show it. Otherwise the default style will be display: none; until you refresh the page.

Inject() is injecting style to your header

Add() is adding "abc" class to your other divs

Showme() is adding "display: block" to ".abc"

Hideme() is adding "display: none" to ".abc"

function Inject(){
  $('head').append('<style type="text/css">.abc {display: none;}</style>');
}
function Add() {
  $("#w").addClass("abc");
  $("#z").addClass("abc");
}
function Showme() {
 $(".abc").css("display","block");
}
function Hideme() {
 $(".abc").css("display","none");
}

button {
border: 0;
padding: 1% 3%;
background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x" class="abc">x</div>
<div id="y" class="abc">y</div>
<div id="w">w</div>
<div id="z">z</div>
<p>First Click below and see how w and z are not hiding</p>
<button onclick="Inject()">Click to inject style to head</button>
<p>Second click below and add "abc" class to w and z.</p>
<button onclick="Add()">Click to add abc to w and z</button>
<p>Then click below to add style="display:block;"</p>
<button onclick="Showme()">Click to show anything with class "abc"</button>
<p>Then click below to add style="display:none;"</p>
<button onclick="Hideme()">Click to hide anything with class "abc"</button>