!important Rule Should Be Removed From W3.CSS...

[Eyad Syria-lover]

I've Been Analyzing W3.CSS When I Found A Strange Thing.

I Found That !important Rule Is Used More 90 Times In This Framework,The Problem Here Is That !important Is Paralyzing The Ability To Manipulate Some Of Those Elements Who Carries Some Of The w3-* Classes Using Javascript,For Example:

.w3-deep-purple,.w3-hover-deep-purple:hover
{
color:#fff !important;
background-color:#673ab7 !important;
}

As You Can See,I Can't Manipulate Any Element Which Carries The .w3-deep-purple Class Because The !important Rule Has Disabled Style Manipulation Using JavaScript,This Means That The Following Code Is Useless:

function changeFontColor()
{
document.getElementsByClassName("w3-deep-purple")[0].style.color="orange";
}

Although This Code Is 100% Valid,But This Just Won't Work Because Of !important.

 

I Suggest Removing This Rule From The Future Versions Of W3.CSS In Order To Give The Ability To The Developer To Add More Interactivity To His Projects.

[Ingolme]

I don't think the W3Schools staff visits the forum. But this is the problem with calling something "deep-purple" as a class name. It means that when you want to change the color you have to change the HTML.

 

To work around this, you can change the class name of the element instead:

document.getElementsByClassName("w3-deep-purple")[0].className = "w3-orange";

[dsonesuk]

You could use cssText

 

document.getElementsByClassName("w3-deep-purple")[0].style.cssText+="color:orange !important;";

[Eyad Syria-lover]

I don't think the W3Schools staff visits the forum. But this is the problem with calling something "deep-purple" as a class name. It means that when you want to change the color you have to change the HTML.

 

To work around this, you can change the class name of the element instead:

document.getElementsByClassName("w3-deep-purple")[0].className = "w3-orange";

That Seems Fair To Me,But The Problem Still About How To Manipulate The Color Using JavaScript If There Is No Class Name For That Color In W3.CSS,For Example There's No Class Name ".w3-deep-pink" (hex=#FF1493) For That Color...

 

In Your Opinion,Should I Contact Them To Fix This?