How to overwrite special, masked CSS rule?

[pstein]

Lets start with an example from a CSS for a Webpage:

<div class="lg:w-10/12 ....">....</div>

One of the referenced CSS rules is as follows (mind the additional masking backslash \):

.lg\:w-10\/12 { width: 50%;  }

Now I want to override this CSS statement (later after loading) by the following additional CSS  statement:

.lg\:w-10/12, .lg\:w-10\/12 { width: 90% !important; }

I put the classname WITH and WITHOUT backslash before it.
Nevertheless the !important new CSS is NOT accepted.

The width is (as shown in WebDeveloper of Firefox) still 50%.

What wrong?

How can I (without touching the original CSS file) adjust the width otherwise?

Peter