We Keep Coding

Override existing div element that has !important by adding ID with javascript

Html code
<div class="hamburger-menu">
CSS code
.hamburger-menu {
Background-color: white !important;
}
I would like to override this by adding ID inside the div with javascript so i can add new background-color with ID selector. I am kind of new with javascript.
Anyone able to help me out?
Thank you

Whenever u style an element with !important, it will override all the existing styles even the id specified styles. Check this example
Always try not to use id selectors, inline styles, or styles with !important, as it will make it very difficult to modify styles.
Check out this article

Is it possible to stop inheriting CSS within shadowDom from HTML tag?

Im injecting some Javascript that creates an isolated div located at the top of the body. Within this div there is a shadowDom element. The reason I went with shadowDom is because I thought it stoped CSS from bleeding in to all the divs within the shadowDom. But I can clearly see that it is inheriting style from the tag(font-size: 62.5%;). This is causing my text to be smaller. I can override this with adding font-size: 100% !Important but even though it crosses it out in the inspector tools it does not actually change. The only way I can get it to work is by unchecking the box in the CSS portion.
Please Help
Thanks,
Dev Joe
HTML Shadow Dom IMAGE
CSS Checked IMAGE
CSS Unchecked IMAGE

You should not use a relative font size (like 100%) because it applies to inherited size... so this will have no effect.
Insead, you should define a rule to the :host CSS peudo-class:
:host {
font-size: initial ;
}
NB: You'll need to add !important only if the font-size defined in the container (the main document) applies to the host element directly.
NB #2: You can use all: initial instead but you cannot combine it with !important.
host.attachShadow( { mode: 'open' } )
.innerHTML = `
<style>
:host { all: initial }
</style>
Inside Shadow Root <br>
<div>Div in Shadow DOM</div>
<slot></slot>
`
body { font-size : 62.5% ; color: red }
Small Font
<div>Div in main Document</div>
<div id=host>Light DOM</div>

No need for shadow dom, just use the all attribute to disable the inheritance.
#myElement {
all: initial;
}

CSS on SAPUI5 Controls

I have a sap.m.Input inside a div tag in HTML view of sapui5. When I apply css to the div, it works fine on all the div elements. However, I want to apply css on a single control inside the div tag. It is not working. The code is :
<div data-sap-ui-type="sap.m.Label" data-text="Sr.No :"></div>
<div data-sap-ui-type="sap.m.Input" id="id_SrNo_Val" data-width ="10%"></div>
The above code does not work if I apply css to the input. It works fine on the label. I am trying to reduce the height of the input. It works on Chrome console with runtime id. However I want to apply css with the given id which it does not accept.
Please help.

In SAPUI5 we don't know at which point time of CSS is applied to the Controls.
So you've to give "priority to your css class or id" which can be achieved using the property !important
Add your CSS property like following
#id_SrNo_Val {
height : 10px !important;
color : blue !important;
}
Use anything you want with !important property.
Update: Avoid !important because it'll become harder to debug at some point of time. Also in CSS, it's not suggested to use.

You may assign additional class to a control adding class="yourStylingClass" attribute.
You shouldn't use control ids for styling, since SAPUI5 may modify those, add prefixes etc.

Combining inline css and hover state, is it possible?

I have found out that if we write inline css (or add it using JavaScript), then we lose the value of css hover. Is it possible to change such behavior?
Simple example
<div id="test" style="color: red">test</div>
<style>
#test:hover {
color:blue;
}
</style>
In this case hover doesn't work.
Update
I can't use !important, because after it I will not be able to change that atribute via JavaScript.
Also I generate styles dynamically, so I can't add specific classes via JavaScript.

because inline css overrides your css styles in the file
if you had
color: blue !important
it would work but not recommended, you can always use jquery to remove the inline style tag though haha
Update:
remove the style tag using jquery or when using javascript... add !important so the inline css would have important

I can't use !important, because after it i will not be able to change
that atribute via javascript.
You can still use !important, just add a class with JavaScript and remove it anytime you want.
demo

The easiest way to go is the following
$(selector).hover(function() {
$st = $(this).attr("style");
$(this).attr("style","");
},function() {
$(this).attr("style",$st);
});

In CSS, the style attribute will override any style elements or stylesheets. If you cannot change the the style attribute, you'll have to use !important. If you can remove the style attribute altogether and place everything in the style element. Or even better, in a separate stylesheet your problem will be fixed.
P.S. The type attribute is required on style elements. This won't fix your problem, but you should change <style> to <style type="text/css">

Change selected text color of individual element

This may not be possible, but I'd like to confirm.
You can globally change the selected text highlight color of the page with
::selection {
background: #cccccc;
}
::-moz-selection {
background: #cccccc;
}
but is it possible to change the the highlighted color for an individual element in JavaScript?
For example, if s is an element's style attribute, you can change the text and background colors using
s.color = s.backgroundColor = "#cccccc";
is there a style to change the element's highlight color?
This must be in old-fashioned JavaScript, no JQuery.
EDIT:
Also, because of performance, I need to change this to the element itself. CSS class swapping performs very poorly. The use case is that every word in a page I do not own will become it's own element. On an average page, adding a CSS class through script is taking 20-30 seconds whereas changing inline styles can be done in under 1.

Pseudo-elements and pseudo-classes aren't in the DOM, but you can use classes to achieve your result.
So add a rule like
.selectionclass::-moz-selection {
background: #cccccc;
}
to your stylesheet and add the class name selectionclass to your element.