Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Given the following CSS and HTML, why does it produce a blue background?
div div { background-color: blue }
.myClass { background-color: green }
<div>
neither green nor blue
<div class="myClass">
should be green but is blue
</div>
</div>
If I understand selector calculation correctly, the first rule should evaluate to 0:0:2, while the second should evaluate to 0:1:0. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity mentions inherited styles being overridden, but this is a direct application of class on the div, not an inherited style. What am I missing here?
UPDATE
I am working in Angular 8, and here's a screenshot of the thing that's been confounding me. So...since this works outside of Angular, is this somehow an Angular issue?
Here's the devtools console, showing the override and the css rules...
After looking closely at the CSS style calculations in the second image, I think I realize now what's going on. If someone can confirm this, I'd appreciate it. The generated CSS
div[_ngcontent-xpy-c52] div[_ngcontent-xpy-c52] {
appears to have attributes attached. Those attributes ratchet up the class score of the div div rule, making it override the .myClass rule. Even though the original CSS does NOT contain those attributes, what basically every browser sees is what I have quoted here, and so the outcome at runtime is quite different from what one would otherwise expect.
enter image description here
Your code worked correct. Here my code.
<style>
div div { background-color: blue }
.myClass { background-color: green }
</style>
<div>
neither green nor blue
<div class="myClass">
should be green but is blue
</div>
</div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have no HTML or CSS experience but trying to figure out what exactly this line of code means
<div class="overflow-100">
It has an affect on how wording appears on our portal and not sure if it's limiting words to 100 characters, 100 pixels or something else
overflow-100 is a user defined class that css selectors can target. Without seeing selector/s targeting overflow-100 we have no idea what declarations it applies. Open the document in the browser, open dev tools (f12), inspect element (ctrl+shift+c) and hover over the div with the class overflow-100. In the styles tab find a rule with a selector overflow-100 and you will see css declarations it applies. Googling for those rules will give you a understanding of the effects of the overflow-100 class.
Class names are purely user data. Neither HTML nor CSS assign any special meaning to them so they don't accomplish anything by default.
Their purpose is to assign custom information that can be leveraged later from other tools (JavaScript, CSS, accesibility tools, web crawlers...).
Here's a quick and dirty showcase:
document.querySelectorAll("div").forEach(function(box){
box.classList.forEach(function(className){
let fragments = className.split(/^foo-(\d+)$/);
if (fragments.length === 3) {
box.innerHTML += ` <strong>Type ${fragments[1]}</strong>`;
}
})
});
div {
border: 1px solid orange;
}
.foo-100 {
width: 100px;
}
.foo-200 {
width: 200px;
}
<div class="foo-100 something-else">Hello, World!</div>
<div class="foo-200">Hello, World!</div>
To help figure out what your application is currently doing with them you can use the browser developer tools. For instance, here:
document.querySelectorAll("div.bar").forEach(function(box){
addEventListener("click", function(){
alert("You've clicked on bar");
})
});
div.bar {
color: green;
}
<div class="foo">Hello, World!</div>
<div class="bar">Click me!</div>
... you learn you have an event listener and an inline style (please note anyway that this example is an Stack Overflow snippet, which is more complex that regular code):
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 4 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
When I do something like:
#caterpillar {
color: white;
}
<div id="caterpillar">
sample text
</div>
I get my white font and am happy. BUT for some reason, JUST CHANGING THE NAME OF THE DIV TAG:
#centipede {
color: white;
}
<div id="centipede">
sample text
</div>
In the same HTML template with the same CSS does NOT work and inspecting in chrome shows that it defaults to:
element.style {
}
user agent stylesheet
div {
display: block;
}
and I do not get the desired effect. What could be happening? Why does it like one id name, but not the other ?
Neither of your examples work. white is not an acceptable value for font (well, it is if you are trying to use a font family with the name "white").
If you want to change the foreground colour, use the color property.
You can't set the font color with the font shorthand, you need to set it with color: white.
So the fact that it "does not work" in the second example is actually the expected behavior. The reason why it works with #caterpillar is propably because the color is inherited from a parent element, or there are some other CSS declarations for #caterpillar elsewhere, which may apply.
Take a look at the example below, it works with both ID's and the correct CSS
#centipede{
color: red;
}
#caterpillar {
color: green;
}
<div id="caterpillar">
sample text
</div>
<div id="centipede">
sample text
</div>
What the font shorthand is actually for
Take a quick look at the docs at MDN, the font shorthand can be used to combine the following CSS properties:
mandatory
font-size
font-family
optional
font-style
font-variant
font-weight
line-height
Try clearing your browser cache to make sure your page is loading the latest version of it.
You could also try checking the sources in google developer console to make sure the latest is being loaded
Use color property instead of font
#caterpillar {
color: white;
}
#centipede{
color: white;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Occasionally, css adds dynamic to pure html pages. For example, changing the background colour on hover. I want to understand, how does the css work?
CSS:
div {
position: absolute;
width: 100px;
height: 100px;
background: black;
}
div:hover {
background: red;
}
HTML:
<html>
<body>
<div></div>
</body>
</html>
plnkr code
When mouse enters "div" does browser just override background to black (i.e browser leaves height: 100px, width: 100px and position: absolute) or recalculates it ?
In usual case, when some event happens and changes css of an element, does it just override properties which are present in css style ? In other words, after some several events, does style of an element might end up arbitrary?
In usual case, when some event happens and changes css of an element, does it just override properties which are present in css style ?
The element begins to match a new selector. A new rule-set is applied to the element. The properties of the element are recalculated according to the standard rules for the cascade.
In other words, after some several events, does style of an element might end up arbitrary?
No. The rules for the cascade (which defines which order rules are applied in) are (very) clearly defined in the specification. There is nothing arbitrary about them.
In a nutshell: When you hover over an element, the element goes into the :hover state. It now matches two selectors in the CSS file: div and div:hover. All the properties of both rule sets are applied to the element. Where there are conflicts, e.g. background defined on both, the more specific selector wins (*read the spec, the rules aren't easily summarised).
When you leave the element, it goes out of its :hover state. The div:hover selector does not apply anymore, only one rule set applies now. All the element's style properties are recalculated from scratch, resulting in the background turning black again (because it's the only rule that applies).
Everything is in a very defined state at all times, the changes are not incremental and will never result in weird states because something didn't get unset or such.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to display two kinds of styles in one webpage. I have a.css for the first style and b.css for the second style. The order is b overrides a. The problem is I want the css priority to be reversed in a particular div tag. Is this possible?
What is the reason for this? You can always override using an "!important" declaration. For example:
.style { font-size: 12px !important;}
Also, refer to this guide here: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade (Specificity Calculations, Inheritance, The Cascade)
There are very few cases where you need to have 2 different CSS files to do the same thing. However, there are many methods that can fix this, one of which is just creating an class/ID of its own in what ever CSS file you want to override with and then attach it to the HTML Element.
If that doesn't work, my next suggestion would be is to try inline styling.
<div id="blabla" style="whatyouwantforthisinparticular">
You can't just "override" another script through HTML. Code works in a linear format. Once it sees a new line of code referring to that, it will take precedence based on what you did with it. For example, in CSS, you can have 2 different body stylings, but the top one's attributes will only be used unless the second has something new to add. For example:
body{ background-color:black; width: 500px;
}
body{ background-color:white; height: 300px;
}
In this example, background-color: black will changed to "white" and then it will add 500px to the height on top of the width of the previous styling. However, if you must have black, then adding !important will make it take precedence over white.
Yes you can do it using the !important attribute.
.your-class{
property: value !important;
}
Also you can do that being more specific in your class
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
For some reason, when I use inspect element on my file input, it shows where it's supposed to be. But it doesn't behave that way. Go to oceankarma.co and click post at the top. Then try clicking the youtube icon. Please help
All the icons are of different dimensions. Youtube, Vimeo icons are placed in tags while other black icons are used as background. This is causing the different styles.
Use same dimensions.
Same styles(except for background image so that everything is either called as background or everything via <img> tag)
If you do the above, it should give the result you expect.
I believe the issue you're referring to is that the the hidden file inputs are overflowing into the youtube link, try adding this to your CSS to fix it:
#servicetable tr td {
position: relative;
}
#upload_video input, #upload_photo input {
position: absolute;
left: 0;
}
Also note that you cannot set the cursor property for file inputs. you can read this question for more info
Sorry, but none of the existing answers helped me. Kind of like what koala_dev said, the inputs are overflowing. So I added a simple overflow:hidden style to the container and that fixed it.