I want to center a div in the middle of the screen. That's why I am overriding some CSS rules. I wrote the rules again and set !important. (Please see the printscreen. The discussed rules are marked in red.)
As you can see the old rules are crossed out now but it still doesn't work. It only works when I manually uncheck the rules. (Yellow Checkbox on the left)
I checked it out in Firefox and the overridden rules are not crossed. This means the issue is probably related to the override.
What is the difference and how can I fix that?
Everything that's checked is active; all things are checked by default when you open the inspector and you can uncheck individual property-value pairs to temporarily disable them, either until you refresh or check the box again.
Everything that's crossed out is something that's currently being overwritten by another property-value pair somewhere else, either in the same selector or in another selector somewhere. It is being overwritten because a value is either the same but written second (like a shorthand property used after a specific one), or it could be overwritten because there is a more specific selector somewhere with the exact same property somewhere.
Related
Safari/Chrome Developer Tools indicate that a CSS rule is overridden by something else by striking it through, as shown in the image.
Sometimes I find myself in a situation where I can not figure out from the CSS files what causes this rule to be ignored. But surely Safari itself must know as it strikes it through.
Is there a way to know what overrides such a rule?
Look at the one which isn't striked out, higher up on the list.
Alternatively, view the computed styles. They will be the definitive applied styles.
When you inspect an element, you can show the 'box'. Just bottom of that, you have a 'filter' which should show you every properties being applied to your element.
If you click on a property, it will give you the file and the line number.
Developer Tools will list all rules for an element. Just read through all the CSS rules that apply, and check for a non-struck-through one with the same name.
Go to Elements >> Computed and you'll get the stylesheet that defines the rule you're looking for.
Go to the Computed tab of Chrome Developer tools. Find wanted property and expand details.
When I use Chrome Developer Tool to inspect an element, the height property is greyed out. From here
https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/#live-edit-a-do-node
it means i can't edit it.
But my question is why I can't edit it?
And how can I find out which style in style set this property? With other properties, I can expand it? but for this greyed out one? I can't expand it.
This is typically caused by the user agent style-sheet. You can override this usually by reordering your CSS or with a CSS normalizer (like normalize.css or reset.css, though these can add unnecessary bloat to your code if you don't need all of it).
It is important to note the order in which your style-sheets are invoked because CSS is by definition, cascading and the lowest definitions will take precedence.
In brute force situations, and only when there are no other clear solutions, you can use !important declarations.
I want to add a new style rule directly in the Chrome developer tools, but I'm struggling to do so, from following the guide at https://developers.google.com/chrome-developer-tools/docs/elements-styles#styles_edit
This is the CSS rule I want to add - I can't set up the selector by selecting an element, I need to type it it directly. I want to do this to make sure that the CSS syntax itself is correct.
.y-axis .tick:nth-child(2):nth-last-child(1) text {
font-weight: bold;
}
I have clicked on the "plus" sign to add the rule, but when I do, I'm finding that the developer tools just won't let me add it by typing or pasting it in - it either goes gray, or it pastes in like this, with the brackets wrong:
Then when I press Enter or tab out, or try to edit the rule, the text just vanishes. Very frustrating.
How can I add new CSS rules in the developer tools that aren't amenable to being set up via inspecting an element?
Apologies if this is the wrong forum for this question.
For it not to go gray, you need to select an element to which the rules DOES apply.
You are not showing your code, but that rule will only apply to a second child of .tick which is ALSO the last child. If the element you clicked to create that rule does NOT meet those selectors, it will go gray, and BELOW the other rules for the element itself.
Current versions of Chrome will won't move it or hide it until you select another element, so this is probably an old issue, but for others experiencing similar issues: "The rule must apply to the selected element". But since you can't touch the pseudo element until you add content:"" to it, you'll have to create the rule, add content property to it, then touch the pseudo element, and then it will not be dimmed anymore.
Again, current Chrome allows you edit it even when dimmed.
First, select some element and add a new CSS rule as described in the Chrome documentation:
Click the New Style Rule icon located in the upper-right corner of the styles editor. A new rule with an automatically suggested selector appears.
Then, click the inspector-stylesheet:1 link in the top-right corner of the newly added rule box and edit the rule in the Sources tab of the Developer Tools.
I've looked in Firebug but can't find why a CSS background property is being cancelled out. I've looked if there is a more specific rule but nothing. Please find the image snippet, as follows:
Maybe somebody has a suggestion?
Firebug will make you think a shorthand property like background or margin (maybe font) was cancelled out when in fact only one property was modified by a later/more specific rule
Use the Computed tab (close to the Style one) to see what's going on.
For each individual property, you'll be able to see which one is more specific and which ones were defined somehow but are cancelled out for real.
It may be a rule with !important modifier for example (meh) or usually a margin-top over a margin and the 3 other properties still with the values set by margin.
Well, this is pretty straightforward. If Chrome's Developer Tools is showing me that a style is overridden, how to see what CSS rule is overriding it?
I want to know if is there anything like "Show me what overrides this".
OBS: Please, don't point me to Firebug.
Use the Computed Style panel of the element inspector. Expand the property of interest to see the list of applicable rules, and which one won.
You can simply look at the ones with the same name which aren't striked out, remember the listing is by importance.
Or you can view the computed styles. They will be the actually applied styles.
crtrl + shift + c and inspect the element. Then find the style without a line through it, in the box in the down right corner.
the override is in most cases at the top (and without a line through it, as this style is the "winning" one).