This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
At some point during development, I indented text to -999 without realizing it. I have no idea where I could have done this so I started to mess with the CSS of the website. I found what I was looking for but as you can see in the screenshot the first CSS is prioritized over the second. I was curious as to whether or not you can change the priority or order of that list.
screenshot of website
To change the priority of a CSS element, you have to add !important. In this case, add text-indent: 0 !important;
The !important property in CSS means that all subsequent rules on an element are to be ignored, and the rule denoted by !important is to be applied. This rule overrides all previous styling rules -- the !important property increases its priority.
Related
This question already has answers here:
Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
(2 answers)
Closed 5 years ago.
I'm styling an <input type="range" /> element.
For the track I'm using ::-moz-range-track for Firefox, and ::-webkit-slider-runnable-track for Chrome.
When I define the styles for Firefox, everything works fine, but when I add the Chrome-selector to the definition, it doesn't work in Firefox anymore.
Working in Firefox: https://jsfiddle.net/zr8p7vsy/
Not working in Firefox: https://jsfiddle.net/zr8p7vsy/1/
Having the same CSS styles twice – once with the Chrome selector, once with the Firefox selector – doesn't have this effect.
Why does the additional selector trigger this behavior in Firefox?
Edit: I noticed the second one also doesn't work in Chrome. When I remove the -moz- selector, it works. Also, when I add a non-browser-specific selector instead (e.g. .whatever) it works.
So it seems that multiple browser-specific selectors are crashing the whole styling block.
Why does it do that?
It's because ::-webkit-slider-runnable-track is not valid in Firefox.
This behavior is defined in the selectors level 3 standards
Warning: the equivalence is true in this example because all the
selectors are valid selectors. If just one of these selectors were
invalid, the entire group of selectors would be invalid. This would
invalidate the rule for all three heading elements, whereas in the
former case only one of the three individual heading rules would be
invalidated.
Because an invalid selector part - and since these are vendor extensions, they are not really valid - invalidates the whole rule.
This question already has answers here:
Is it possible to give one CSS class priority over another?
(7 answers)
Closed 8 years ago.
I want to make high priority of external CSS class than internal class and inline CSS class. Is It possible? How can I do that?
Its bad practice but can be done.
If you put !important after your selector it should overide inline styles.
Idealy though you would remove the inline markup.
Example
.myclass{
color : red !important;
}
yes it is possible you can use !important in your external css classes to give them high priority...rather inline & embed css
This question already has answers here:
What is the cascading module used for? Why it's called "cascade"?
(9 answers)
Closed 8 years ago.
I'm just wondering to know that about cascading. Is the css called cascading because this stores in cache?
What is the reason for css to say or name it cascading?
Cascading is when multiple items is row follow each other's in order
Have you ever heard about the Domino's cascading effect, in which when a piece fall it will cause the next piece fall till the end.
Css is named cascading because the effect is cascading according to where is your style
There are 3 locations where the style is located
Inline
Internal
External
So the styling is cascading in following order:
The html element will search for inline style and apply it, if there is no inline style then it will CASCADE to internal style and apply it, and if there is no internal style then it Will CASCADE to the external style and apply it
Got it?
This question already has answers here:
Why don't CSS resets use '*' to cover all elements?
(3 answers)
Closed 9 years ago.
*{
margin: 0;
padding: 0;
}
and
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,button,textarea,blockquote,th,td,p...{
margin:0;padding:0
}
the first is simple,and I like it.But why many big web sites use the second method
The universal selector (*) selects all elements on a page. This is great, but this selector would end up unnecessarily targeting elements which shouldn't realistically have no margin or padding by default.
Targeting specific elements is more logical as you wouldn't then have to override this CSS later on. For instance, if you wanted all instances of li elements within your document to have both margin and padding, you wouldn't want to include it within your list of selectors; equally you wouldn't want this to be targeted with * as it would add (albeit a very minuscule amount) to the time it takes for your page to render.
Nowadays a lot of websites actually make use of Normalize.css (direct link to stylesheet) to reset CSS:
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
The first one does not clutter your debug tool (like Firebug) but the second one is more customizable as you can choose the elements that are not reset. Usually CSS reset files do not reset element like input, select or button and use the second form.
You should use SECOND ONE
because this is
Best one
logically correct
sometimes we need to use default properties of HTML elements.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What does a star-preceded property mean in CSS?
I downloaded CSS file for one of jQuery scripts and it look like this
.usual div {
*margin-top:-15px;
clear:left;
background:snow;
font:10pt Georgia;
}
what is the use of star sign?
This is a hack for IE7 and under. Only those browsers will respond to the CSS rule, as it's considered invalid to all other browsers.
It's a hack to, in this case, change positioning in certain versions of IE.
The CSS standard says to ignore properties whose names are preceded with some character, but some versions of Internet Explorer ignore this. Some you might see are:
*someproperty: somevalue - IE7 and earlier affected
_someproperty: somevalue - IE6 and earlier affected
#someproperty: somevalue - I forget. Probably the same effect as *.
You should probably use conditional comments instead, however.