We Keep Coding

How to add a hover effect with dynamic styles to a component element?

I have this Angular component where hover effect is currently applied with pseudo-class :hover in .scss file. But I want to apply the hover effect with dynamic values.
So suppose if I want the element's background to change on hover, the current css looks like this:
.element {
display: flex;
justify-content: center;
&:hover {
background-color: red;
}
}
But now I want the hover background color to have dynamic values that is available inside the component provided by the user from the UI so the color could be anything. Another thing which I also want to achieve is to add a class to the element when it is selected. What I mean is when hovered, the background will change to a dynamic value but if the element is selected, that same color will be the background color. And if unselected, it will go back to the original color.
I'm new to Angular so I'm not sure how to achieve this. Anyone can help me?

You cannot dynamically set pseudo classes via JavaScript. You would have to either:
Implement your own dynamic styling using the mouseover event in your component
Swap to a pure CSS solution and let the consumer of your component override the hover pseudo selector with the desired color in their own CSS.
I would favor the second option. Turn off view encapsulation in your component declaration, make sure your component CSS is reasonably contained to just that component via some CSS component methodology like BEM, and just let the consumer override your styles.

How to I apply a custom style for a third-party component in a single React component without affecting its style in other components?

I am using a dropdown from react-bootstrap and its context-menu has a className called Select-menu-outer. I wanted to change the font size of this menu only in one component.
What I did was, I just created a new css file called panel.css and did import './panel.css; in my component.
In the panel.css, I applied the style to the Select-menu-outer like
.Select-menu-outer { font-size: 12px }
This worked fine, but it affected the font size of all other dropdowns in the entire app.
I would have used CSS Modules and do something like import style from './panel.css and do className={style.Select-menu-outer} something like that, but since this is a third-party library component, I wasn't sure if I can do that.
Any good way to make this work?

Add a new class list to the drop down you what to change called .Select-menu-outer-size
Then do this in your css:
.Select-menu-outer-size { font-size: 12px !important}
The !important overrides the other class.
Javascript could be used!
let's say that it is the 3rd dropdown on that page with this class: .Select-menu-outer
So we do:
var addclass = document.getElementsByClassName("Select-menu-outer").[2];
addclass.classList.add("Select-menu-outer-size");
Then add you css:
.Select-menu-outer-size { font-size: 12px !important}
Note: 0 is 1 and 1 is 2 etc. for document.getElementsByClassName("Select-menu-outer").[2];
Linkhttps://www.w3schools.com/jsref/tryit.aspfilename=tryjsref_document_getelementsbyclassname

You can use the bsPrefix prop to customize the class of your component, in order to style it via CSS.
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
Source: React-Bootstrap docs

You can use inline-styles on that specific menu to override the default style.
OR
you can assign an id e.g. id="outer-menu" to that specific menu tag and access that menu with #outer-menu in CSS.
The priority of id is greater than className so it will probably override it.

Are type selectors supposed to be overridden by id selectors [duplicate]

What is the level of CSS specificity received by inherited properties? I read through the W3 recommendation regarding CSS specificity and so I understand how to calculate the different specificities of css rules which are directly targeting the same element, but I see no mention there of the level of specificity given to inherited attributes.
In particular, the issue I'm encountering has to do with header elements, though I would be very interested to understand this in general.
For example, here's a snippet of HTML:
<h2>This should be black</h2>
<div class="all_red_text">
<h2>This should be red</h2>
</div>
Now if I include some CSS like this:
.all_red_text { color: red; }
I will get the result I expect. On the other hand, if I the css which I included was
h2 { color: black; }
.all_red_text { color: red; }
then all the text will be black. In the first case there is some default browser CSS which is able to be overridden by the inherited property, but then when the same property is manually specified in the second example it takes precedence over the inherited property.

Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.

CSS is applied to elements in this form:
Priority 1: inline styles
Priority 2: CSS ID styles
Priority 3: CSS class/pseudo-class styles
Priority 4: CSS element styles
Priority 5: Inherited styles
So, using your HTML structure & CSS:
h2 { color: black; }
.all_red_text { color: red; }
<h2>This should be black (and is black)</h2>
<div class="all_red_text">
(This text is indeed red.)
<h2>This should be red (actually, its parent is red - this text is black)</h2>
</div>
The .all_red_text CSS is telling the div.all_red_text element and everything inside it to have red text. The h2 CSS is telling the h2 elements directly to have black text. When the h2 is rendered, it sees "my parent element wants me to have red text, but I'm directly being told to have black text". The same idea applies to further up parents, including the HTML and browser defaults - this allows you to, for example, set the font-family on the html element and have it apply to everything on your (well formatted) web page, unless something specifically overrides it.
If you want the h2 inside div.all_ted_text to also have red text, you'd need to tell those h2 elements directly to have red text; something like this:
.all_red_text h2 { color: red; }
CSS-Tricks has a pretty nice guide on this, although they don't currently go too deep into inherited properties.

There is no such thing as specificity of inherited CSS properties. Selectors, not properties, have specificity.
In your example, both h2 elements match only one of the rules, h2 { color: black; }. Thus, the color of h2 is black (assuming there are no other style sheets that affect the rendering). Anything set on some other elements (including the parent of the second h2 element) does not affect this the least.
If the rule h2 { color: black; } is absent and there are no other rules affecting the situation, then there is no color set on either of the h2 elements. According to the definition of the color property, the value is then inherited from the parent.

Two or more selectors gets engaged into Specificity War, if and only if
they end up targetting the exact same element. However, If two selectors (targetting the same element) have equal specificity weight, then there are other factors like you said, inheritance or the styles getting over ridden in the css file.

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.

Remove full css from div with Jquery

In my css i have
* {
font-family: "Meiryo UI" , Verdana;
font-size:13px;
}
input, select, textarea {
font-size: 12px;
border-color: #333;
color: #333;
border-style: solid;
border-width: 1px;
}
But, i want one DIV without CSS.
I tried
$('#preview').removeClass()
$('#preview').removeAttr("style")
$('#preview').children().removeAttr/Class
But...but without result.
Help me to remove all style from this div with Jquery or just some javascript.
He come from stylesheet.
This is preview pic for my question: https://emailinvest.com/preview.jpg what i want.

Inheritance in CSS is more often helpful than not helpful, therefore take another route by either:
a) Override the styles you specified
#preview .input, #preview select, #preview textarea { }
or
b) Make the styles you specified target a different area using a prefixed selector, eg
#selector * { font: 13px "Meiryo UI", Verdana; }
#selector input, #selector select, #selector textarea { }

If you want to use removeClass you must specify what class to remove or it won't work:
$('#preview input').removeClass('classToRemove')
$('#preview button').removeClass('classToRemove')
You can check with Firebug what class is given to that button and try to remove it like that.
Or you can set your styles directly to that:
$('#preview button').css('background','#ccc');
Or this one.. but I'm not sure it works:
$('#preview').children().removeAttr('class'); // or 'style'

Your stylesheet does not specify classes or specific elements (IDs) and therefore the styles are being applied to all elements which match by tag.
Specifically, your button is being styled by the "input" element style specified in the stylesheet.
This means you do not have any classes you can easily remove to reset the style.
Buttons in particular are very difficult to set back to their original style once they have been set to something different, particularly in a cross-browser-friendly way.
You have a few options, of which only one is sensible:
As meder has suggested above don't set the style for this div in the first place. This is the best option. You can do this by either setting explicit class names or ids for your other divs and listing them in the stylesheet, OR add a class for the div you want to ignore, and use the "not" selector, eg input:not(.myUnstyledButtonClass) (this only works in modern browsers)
Manually construct your DIV inside an IFrame so it is not subject to the main document's styling. This seems like overkill though
I haven't tested this one, but you could try creating an iFrame, rendering a button (which would be of the unstyled form) and then iterate and recurse through and copy all properties and styles of the unstyled button to the button in your div. There's a very slim possibility this would work. I wouldn't even bother trying it however....
Go with 1 - what meder has suggested. It's probably worth posting up the code you have tried using when you commented to him that "I tried...no result". Chances are you've simply misinterpreted his suggestion or overlooked something.
For an example, see:
http://jsbin.com/ikobe4
To use ":not()" you need to add unstyled (or whatever you choose) as a class on your button, eg:
<input type="button" class="unstyled" value="Button Text" />
And change the selector in the css file from
input, select, textarea {
to
input:not(.unstyled), select, textarea {
...but as mentioned, this wont work in all browsers, so your best bet is to add classes to all the other divs, and explicitly specify which divs you want to apply styles to, rather than specifying which you don't want to apply styles to