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.
Related
I need to apply a **visited ** style to specific links on my pages. I'm trying to use the :not selector to avoid some classes starting with btn.
Here is my CSS at this point :
a:visited :not(class^='btn'){
color: var(--main-grey);
}
Of course, if I'm here, it's because it is not working at all :-)
Page is built on simple HTML/CSS/JS, no fancy code that could save me !
Many thanks in advance for your participation in helping me solve this issue :-)
Matt
You used the selector:
a:visited :not(class^='btn')
But this was supposed to be the correct selector for the class attribute:
a:visited:not([class^='btn'])
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Plus The :visited CSS pseudo-class has some privacy restriction:
https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
For privacy reasons, browsers strictly limit which styles you can
apply using this pseudo-class, and how they can be used:
Allowable CSS properties are color, background-color, border-color,
border-bottom-color, border-left-color, border-right-color,
border-top-color, column-rule-color, outline-color,
text-decoration-color, and text-emphasis-color.
Allowable SVG attributes are fill and stroke.
The alpha component of the allowed styles will be ignored. The alpha
component of the element's non-:visited state will be used instead. In
Firefox when the alpha component is 0, the style set in :visited will
be ignored entirely.
Although these styles can change the appearance of colors to the end
user, the window.getComputedStyle method will lie and always return
the value of the non-:visited color.
The element is never matched by :visited.
That I referenced for the sake of completion but you were already just styling the color only so it didn't hit any restriction.
Here's a demo showing that the rule will correctly style the first anchor element (not having any class beginning with btn) with red color. Of course if you need to force the :visited status, if you don't first visit the link, you might just flag its status on the developer tools.
a{
font-size: 2rem;
}
a:visited:not([class^='btn']){
color: red;
}
Google
<br>
2ndLink
Thanks to everybody who contributed to this solution. Here is my final code :
a:visited:not([class^='btn']):not([class^='sitemap-element']):not([class*='nav-link']){
color: var(--main-grey);
}
A bit harsh to read maybe, but it's working great :-)
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.
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
I have edited my custom CSS to include ::selection{color: white; background: #2f3f58;} or multiple similar variations including copy/pasting and then editing code from W3Schools, W3C, stack overflow, and other sites. The code does nothing. I am using the http://alxmedia.se/themes/hueman/ Hueman theme and it has almost the exact same code that seemed to be working. So i copied this code into my custom CSS and edited it and that did not work either. Finally i disabled the theme CSS pertaining to selections. No matter what I do my selection color is the same red set in the theme options menu as a primary color. The hex for that red is not in the theme CSS however except in the commented out selection element that I am replacing. Is there any way to override the highlight color using CSS that is not the ::slection: element or am I using the element wrong?
the code is now
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
much thanks to #citizenen and is wonderful suggestion
That's the right element for selection color. You can use the "!important" property to raise the specificity and force the style over others. Also use "background-color" instead of just "background". Try changing it to this:
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
More on !important here: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
You are missing a closing brace in your CSS file (custom.css) that's preventing styles after that point from applying correctly. In the future, copy your code into a tool like Lint (http://csslint.net/) and it will find the errors for you.
Cheers!
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