What do the crossed style properties in Google Chrome devtools mean?
While inspecting an element using Chrome's devtools, in the elements
tab, the right-hand side 'Styles' bar shows the corresponding CSS
properties. At times, some of these properties are strike-throughed.
What do these properties mean?
Answer - https://stackoverflow.com/a/3047117/2232902
It means that the crossed-out style was applied, but then overridden
by a more specific selector, a more local rule, or by a later property
within the same rule.
Is there a way to prevent this behavior? ie- Stop the overriding of the property.
Note - I don't have control over the selectors.
Not really, that's how browsers render pages.
You can stick an important on your CSS:
.example {
color: red !important;
}
Or you can use Javascript to change the Style of an element after the page has loaded.
You can add !important before the semicolon in your CSS code.
.example-class {
width: 500px !important;
}
You can read up on it here
Related
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
This question already has answers here:
Chrome Developer Tools: How to find out what is overriding a CSS rule?
(3 answers)
Closed 7 years ago.
When fiddling around with styles of sample code, I find the code has styles that will override my style because they will use a higher priority reference (e.g.: .div .class > .class).
I will encounter situations like this:
How do I find out what style is overriding my style? I want to avoid using !important because eventually I'll end up in the same situation.
EDIT: I'm not asking why this is happening. I already know about priority, hence why I mentioned that .div .class has a higher priority than .class. I want to trace what is actually being used instead of simply telling me it is "inactive". Also, I already know about Chrome Developer because the screen shot is from Chrome Developer.
EDIT: actual problem fixed, but the question still remains... is there an easier way to see what causes the override?
Fix: I just needed the selector in the proper order. .box first, then .box-blue.
In devtools, in the style inspector, choose Computed. Find the property you are interested in and click it. You will see a list of all the rules that apply to this property, with the active one at the top, and each with a file/line reference to where it is defined.
Consider the following HTML:
<style>
#foo { color: red; }
p { color: blue; }
</style>
<p id="foo">What color am I?</p>
You would see the following:
You can scroll up or down the styles tab in Dev Tools you use from the above example to find the selector overriding .box-blue. Once you found the enabled border-color in another style, then you can determine what selector overriding it.
When you styled .box-blue with border-color: red for example, it could be overriden with another style with the possibly same property, border. Because border: 1px solid blue could be a shorthand for border-width: 1px + border-style: solid + border-color: blue, Then it could be the possibly overriding the previous style.
There are browser extension that help with this. I use "Web Developer" in Firefox, but there are many others.
Chrome also has View > Developer > Developer Tools.
If you mouse over an item on the screen they will tell you its path (html > body > div.blah > span.foo) and what css styles were applied to that item.
There's no definitive way to infer which selector overrides a given style (as far as I know), but the dev tools interface is intuitive enough that it's normally straightforward to work it out.
Your overriden style shows with a strike through. To find out which selector overrides it, look for an unstruck version of the same rule.
Sometimes this is as easy as seeing:
color: red;
And having to look for a selector with:
color: blue;
Chrome dev tools actually sorts the selectors by priority, so if you find an overridden, style you can be guaranteed that the override will be in the same selector or in one of the ones above it.
But you'll have to remember that some rules are composed of others and you won't always find a corresponding rule with the same name. In your example your border-color rule is being overriden by the border rule from the above selector. The border rule is shorthand for specifying border-width, border-style and border-color.
In your image you can see the .box-blue class's border-color: #bce8f1 rule has been overridden by the border: 1px solid transparent (I cannot see the selector). You can see CSS files of the overridden CSS rules right side of the selectors in Inspect tool.
Sometimes CSS rules might be changed by the JavaScript. It might be shown as inline CSS.
In Firefox Developer Tools you can find it out in one click near the overridden property in the Inspector:
Overridden declarations
Starting in Firefox 43, overridden declarations have a magnifying
glass next to them. Click the magnifying glass to filter the rule view
to show only the rules applying to the current node that try to set
the same property: that is, the complete cascade for the given
property.
This makes it easy to see which rule is overriding the declaration:
https://www.youtube.com/watch?v=i9mDVjJAGwQ
Here's how it looks. Check out the video to see it in action.
Here is a simple explanation.
Certain selectors will override existing ones for example
p {
color: green;
}
.Paragraphs {
color: yellow;
}
#paragraph2 {
color: red;
}
<p>Lorem Ipsum</p>
<p class="Paragraphs">Lorem Ipsum</p>
<p id="paragraph2" class="Paragraphs">Lorem Ipsum</p>
<p class="Paragraphs" style="color: blue">Lorem Ipsum</p>
As shown the selector p is overridden by selector .Paragraphs and the selector #paragraph2 overrides .Paragraphs and the style attribute overrides #paragraph2 and of course any selector with !important will override mostly everything.
Background
So I found this line of code in our Ext JS's css which removes focus for every element in webkit. Unfortunately it has been almost 2 years and they still haven't addressed their TODO.
// TODO: remove outline from individual components that need it instead of resetting globally
.#{$prefix}webkit {
* {
&:focus {
outline:none !important;
}
}
}
which compiles to
.x-webkit *:focus {
outline: none !important;
}
What this does is take away the browsers default focus (UA styles) on links so when the user tabs to an anchor tag they have no UI indication that they are on the tag. I want to use native browser behavior so I don't want to override the a:focus in particular and using initial doesn't work. Also removing the entire style causes UI components to handle their focus UI differently which is not acceptable.
tldr
What is the best approach for applying a style to all tags except a certain tag(s). I know I can make a selector that has all of the tags except the tag I don't want but that is tedious, is that really the best approach ? If so is there a list of valid UI tags for HTML ?
You could use the CSS :not selector, and apply a style to all descendants of .x-webkit except the tag(s) you want to exclude:
.x-webkit *:not(p):not(em) {
color: red;
}
<div class="x-webkit">
<div>red</div>
<ul><li>red</li></ul>
<p>
Not red<br>
<strong>red</strong><br>
<em>Not red</em>
</p>
<table><tr><td>red</td></tr></table>
</div>
I have an html page. When I inspect its elements with Firebug, its styles are striked-through. Why is it so?
The browser applies the style sheets as it goes through them.The first is applied and then the second etc.Thus if you have something like
div{color:#ffe000}
div{color:#ffffff}
The second style will be applied.
If you do not want any style to be overridden by a subsequent change you can use the !important attribute.This will prevent the style to be overridden which has this attribute .
div{color:#ffe000!important}
div{color:#ffffff}
Thus the div will retain its #ffe000 color .
Hope this helps.
Because that line of style is overridden by another style. It depends on the hierarchy of your stylesheets and where in your lines of code is the style at.
Example:
#test-element {
display: block;
}
#test-element {
display: none;
}
In your firebug you would see that the line "display:block" would have a strike-through as it is being overridden by the "display:none"
I am creating a extension for Internet Explorer where I am injecting CSS-styled span tags on webpages. If a specific part of this component is clicked on, a popup is shown.
This popup is in reality a "DIV"-element that I am injecting at the very end of the content page:s "BODY"-tag. I have a CSS-styled table inside this div, and depending on which site I am on, the appearance of this popup is either according to specification (in regards to width, and so on), or not.
I don't have that much knowledge when it comes to CSS and such, but can this be because the "parent" page already has some CSS for "BODY", "DIV", or "TABLE"-elements that is being inherited by my elements?
If this is the case, is there any way of stopping this?
There are (at least) two means of doing this1, but they're both a little messy.
Use an iframe with its own css (this way the pages are separated by being two entirely different web-pages).
Use increased specificity to target the inserted html elements.
body {
/* targets the 'body', and these styles are inherited by its descendant elements */
}
body div {
/* targets all divs that are contained within the 'body' element */
}
body > div {
/* targets only divs that are directly contained within the body element */
/* and these styles will/may be inherited by the children of these divs */
}
The problem with this latter approach, is that you're having to explicitly specify almost all the possible permutations. And there will always be edge cases that aren't accounted for. You'd be best off using class-names to specify the styles for the new content:
.insertedDiv {
/* this will apply to all elements of class 'insertedDiv', but may be overridden */
/* by a more specific id-based selector such as '#container > .insertedDiv' */
But I can only think of these two at the moment.
CSS naturally "cascades", meaning if a container element has a property, it's children will by default inherit it. You can however, of course, override the value on the more specific items by redefining the style for them.
You'll need to inject CSS along with the HTML which specifies all the necessary properties for your popup. Unlike most CSS, you won't be able to assume any defaults, you'll need to specify for your div anything which might be overrode by the page. Make sure you refer to the div specifically by id in your CSS to ensure that your styles override that of the page, and that you don't inadvertently mess with the page's formatting.
You should start with a css reset stylesheet. But it has to be modified to only affect your html. So if you wrap your html in a div with a id like "23d4o829" you can use edit each rule in your reset style sheet so it only affects html that is within that div.
For example,
html, body { /* some stuff */ }
table { /* more stuff */ }
becomes
html #23d4o829, body #23d4o829 { /* some stuff */ }
#23d4o829 table { /* more stuff */ }
and so on. After that, you can have all the css rules you need to control your appearance.
EDIT: I think using iFrames as mentioned by David Thomas is better.