This question already has answers here:
What is the order of precedence for CSS?
(9 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
Say I have an element on which two classes are getting applied with conflicting styles. How is the precedence of the styles chosen?
<h1 className="red blue">What color will I be?</h1>
css file:
.red {
color: red;
}
.blue {
color: blue;
}
Which color will be applied to the <h1> element?
I tried to experiment with it and what I have concluded is that the class that gets defined at the end of the file gets applied. But it's just an observation? Am I missing something here?
codesandbox: https://codesandbox.io/s/conflicting-classes-2jbi7
CSS will read from top to bottom.
So your text is blue, if you move red after blue in your CSS file, it should be red
The last class that is in the code will affect the h1.
If they have the same specificity, the last one is the one that the h1 will be affected by.
Related
This question already has answers here:
How do I edit a CSS variable using JS?
(7 answers)
Closed last month.
I am setting some properties via CSS like so:
:root {--foo: #4c3552;}
I wonder if I can do the same via JS. I have tried:
getComputedStyle(document.body).setProperty("--foo", "#4c3552")
but html does not get updated when applying variable as background color through stylesheet taken that my HTML is <div id="bar"> and CSS file linked to html has setup like so: #bar {background-color: var(--foo);}
setProperty goes on the Element's style.
Read more: CSSStyleDeclaration setProperty
document.body.style.setProperty("--foo", "red")
:root {
--foo: blue;
}
#bar {
background-color: var(--foo);
}
<div id="bar">TEST</div>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 6 months ago.
Here is my markup:
<p>This is <span class="rounded">some</span> text which <span class="rounded">shows</span> what I <span class="rounded">want</span> to do.</p>
I have the following CSS:
span.rounded:not(.clicked):nth-child(1) {
background: red;
}
So, this turns the background of first rounded element to red.
Now, if i click on the word some, it applies a class clicked to the wrapping span tag. The HTML now looks like this:
<p>This is <span class="rounded clicked">some</span> text which <span class="rounded">shows</span> what I <span class="rounded">want</span> to do.</p>
At this point, I expect to word shows to have a red background because it seems to satisfy the selector:
span.rounded:not(.clicked):nth-child(1) {
background: red;
}
However, no other tag ever becomes red. What am I doing wrong?
How can I make the next tag red after the current one has been clicked?
Thanks.
To summarise the comments, and someone please correct me if I'm wrong on this first point, but this:
span.rounded:not(.clicked):nth-child(1) {
background: red;
}
Doesn't work because it will always find the 1st child of the <p> parent that is a span with class rounded, and if it is not clicked, it will apply the rule.
This solution does work:
span.clicked + .rounded:not(.clicked)
This will look for a span that is clicked, find the next span with class rounded, and apply the rule only if it's not clicked.
This question already has answers here:
How to change CSS :root color variables in JavaScript
(9 answers)
Closed 2 years ago.
Basically I need to set theme color which is passed as a model attribute from my controller to my CSS file using JavaScript.
Here is the current CSS file root part:
:root {
--clr-primary: #ffca00;
--clr-dark-blue: #1d1836;
/* --clr-accent: #4917D6; */
--clr-black-900: #1f1f1f;
--clr-black-800: #303030;
--clr-black-600: #3f3f3f;
--clr-white-off: #f7f7f7;
}
I need to update '--clr-primary' to whatever theme color when the page loads.
So what I did was using JavaScript:
var jsonThemeColor = $('#menuThemeColor').val();
var themeColor = JSON.parse(jsonThemeColor)
console.log(themeColor)
root.style.setProperty('--clr-primary',jsonThemeColor);
Yet this doesn't work. Mind you, I have a separate CSS file I have not included CSS inside a <style> tags. So there are no errors, it's just that the color is not getting updated and instead it's showing white color.
You can do something like,
document.documentElement.style.setProperty('--property', 'color');
You can visit this link for a demo created by wesbos.
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
I have an element which changes opacity when hovered. At some point during my javascript, I change the base opacity value of this element. However, even if I change the property back to its original value, the :hover selector no longer triggers. This is how the code works without changing the base value:
#hover-div:hover{
opacity:1;
}
#hover-div{
background:red;
opacity:0.7;
}
<div id = 'hover-div'>
Hover on me.
</div>
As expected, the div becomes fully opaque when hovered. However, if I now introduce two lines of javascript which set and then reset the opacity value, the hover effect no longer triggers:
document.getElementById('hover-div').style.opacity = '1';
document.getElementById('hover-div').style.opacity = '0.7';
#hover-div:hover{
opacity:1;
}
#hover-div{
background:red;
opacity:0.7;
}
<div id = 'hover-div'>
Hover on me.
</div>
How can I change the base value using js while still keeping the effects of the css hover? (preferably using vanilla js/css)
Because of CSS Specificity, inline styles will always override CSS selectors. What you are looking for is to actually remove the opacity style using removeProperty('opacity') so that the .hover-div selector applies:
document.getElementById('hover-div').style.opacity = '1';
document.getElementById('hover-div').style.removeProperty('opacity');
#hover-div:hover{
opacity:1;
}
#hover-div{
background:red;
opacity:0.7;
}
<div id='hover-div'>
Hover on me.
</div>
That is because the Javascript sets the styles inline, inline styles take precedence over external stylesheet
This question already has answers here:
Disable hover on specific div
(3 answers)
Can I stop :hover from being applied to an element?
(7 answers)
Closed 3 years ago.
I have a div which has background-color: blue;. Now when I hover, it changes to red;
I also have an absolutely positioned element, which is (visually) on top of that div, semantically a sibling.
<div>
<div>My blue div</div>
<div>My absolutely positioned element, which is actually on top of my blue div</div>
</div>
Now when I hover over my absolutely positioned element, my blue div will remain blue, and not take its red hover style, since technically I am not hovering over it directly anymore.
Any way I can prevent this?
You can add some CSS to make your absolute positioned element be "transparent" for the your pointer(mouse, touch, etc) by adding following css. But this will also ignore all other events (click, mouseover etc)
.myAbsoluteDiv {
pointer-events: none;
}
if you still want to attach events etc. you can use following more extensive css
.blueDiv{
backgroundColor: blue;
}
.outsideDiv:hover .blueDiv {
backgroundColor: red;
}