CSS which takes precedence, inline or the class?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority:
- Browser default
- Embedded and external stylesheets. Later has precedence over earlier. There IS NOT any inherent difference between embedded and external.
- Inline style (inside an HTML element)
Source (Edit: of original incorrect information, since corrected both here and there): w3schools
W3schools explains a lot about CSS and also goes through and shows examples of most things you can do with CSS. Always a good resource if you have questions about something. (Edit: debatable, they were the source of the original wrong answer.)
What is the order of precedence for CSS?
There are several rules ( applied in this order ) :
- inline css ( html style attribute ) overrides css rules in style tag and css file
- a more specific selector takes precedence over a less specific one
- rules that appear later in the code override earlier rules if both have the same specificity.
- A css rule with
!important
always takes precedence.
In your case its rule 3 that applies.
Specificity for single selectors from highest to lowest:
- ids (example:
#main
selects<div id="main">
) - classes (ex.:
.myclass
), attribute selectors (ex.:[href=^https:]
) and pseudo-classes (ex.::hover
) - elements (ex.:
div
) and pseudo-elements (ex.:::before
)
To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.
Example: compare #nav ul li a:hover
to #nav ul li.active a::after
- count the number of id selectors: there is one for each (
#nav
) - count the number of class selectors: there is one for each (
:hover
and.active
) - count the number of element selectors: there are 3 (
ul li a
) for the first and 4 for the second (ul li a ::after
), thus the second combined selector is more specific.
A good article about css selector specificity.
CSS precedence
As others have mentioned, you have a specificity problem. When determining which of two rules should take precedence, the CSS engine counts the number of #id
s in each selector. If one has more than the other, it's used. Otherwise, it continues comparing .class
es and tag
s in the same way. Here, you have a class on the stylesheet rule, but not on the inline rule, so the stylesheet takes precedence.
You can override this with !important
, but that's an awfully big hammer to be using here. You're better off improving the specificity of your inline rule. Based on your description, it sounds like your .rightColumn
element either is or contains a table
and you'd like the cells in that table to have extra spacing? If so, the selector you're looking for is ".rightColumn td
", which is more specific than the stylesheet rule and will take precedence.
Will inline-styling take precedence over a media query?
When you define inline style then it is available for all devices and any set of media queries you write.
And inline style has the highest precedence so in your case styling displayed will be having inline styles.
In case you want to override inline styles then you need to add styles in your media queries using !important
.
For reference - CSS Specificity
CSS Specificity - Internal vs inline vs external style
No, internal does not take over inline. Inline styles are always the highest priority. From Mozilla Docs:
Inline styles added to an element (e.g.,
style="font-weight: bold;"
) always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
These "external stylesheets" also include style
tags in the head
or body
. See for yourself:
p { color: red;}
<style> p { color: red; }</style>
<p style="color: blue"> Hello!</p>
<style> p { color: red; }</style>
What is the order of loading the CSS files in a HTML page?
Generally the last rule takes precedence. With that being said, there are "exceptions" in that inline styles take precedence over external stylesheets ( an inline !important is more important than an external !important, etc ), and more specific selectors override generic selectors.
Read all about it @ http://www.w3.org/TR/CSS2/cascade.html
Can one CSS file take priority over another CSS file?
It depends on how you set them in your header. So something like this will work:
<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />
The last one will be picked up.
And an helpful link about stylesheets here:
http://www.w3.org/TR/html401/present/styles.html#h-14.3.2
See also: Precedence in CSS if the above doesn't work for you.
Hope it is clear.
make high priority of external css class than internal and inline css
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;
}
CSS class precedence
you could just remove the a
from before the class, and also add body before the display none class to give it a higher priority.
.action_link_2 {
display:inline-block;
}
body .display_none {
display:none;
}
Prioritize parts of CSS selectors
What you are looking for is called Specificity. The linked article explains it very well.
Basically, which selector has precedence is based on how specific that selector is. As a somewhat intuitive example, .red.fruit
is more specific than just .fruit
since it has two class names. Therefore, in your CSS code, even if the .fruit
selector comes after .red.fruit
, the more specific one takes precedence.
There is more to it than just having multiple class names, though. As you can imagine, different types of selectors have different levels of precedence. For example, ID selectors are considered extremely specific since only a single element can (well, should) have the given ID. In general, this order goes like this, from most specific to least:
Inline Styles > ID Selectors > Class, attribute, and pseudo-class Selectors > Elements and pseudo-elements
Definitely read the article for more info.
Now, all that said, I think it's worth mentioning that as a good rule of thumb, you should aim to make your selectors as least specific as possible. In other words, try not to use ID Selectors or inline styles where you can avoid it, and use the least number of classnames necessary to select the elements you want.
Following this principle allows your CSS to be more flexible in the long run and easier to read.
Related Topics
CSS Reset That Sets Everything to Default Values
Sass Calculate Hsl Difference Between 2 Colours
Background-Attachment Fixed with Transform Not Working in Firefox
Dynamically Change a CSS Class' Properties with Angularjs
Internet Explorer Font Face Ssl
How Does CSS Specificity Decide Which Styles to Apply
Revert a Filter Invert() CSS Rule
Possible to Achieve This Mobile/Desktop Layout Using Bootstrap? (Or Other Grid)
Calc() Alternative to Fixed Side Bar with Content
Compiling and Maintaining Ie-Specific Stylesheets
The Behaviour of Top: Auto; Bamboozles Me
What CSS Selector Can Be Used to Select the First Div Within Another Div
How to Remove Border from Specific Primefaces P:Panelgrid
Change Bootstrap Carousel Fade Transition
Stopping a CSS Animation But Letting Its Current Iteration Finish