What is the order of precedence for CSS

Question

I m trying to figure out why one of my css classes seems to override the other  and not the other way around    Here I have two css classes    smallbox        background-color  white      height  75px      width  150px      font-size 20px      box-shadow  0 0 10px  ccc      font-family  inherit      smallbox-paysummary        extend  smallbox       font-size 10px      and in my view I call    lt pre class    span12 pre-scrollable smallbox-paysummary smallbox   gt     The font  The overlapping element  shows up as 10px instead of 20 - could someone explain why this is the case

User · Accepted Answer

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  lt div id  main  gt   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

User · Answer

The order in which the classes appear in the html element does not matter  what counts is the order in which the blocks appear in the style sheet   In your case  smallbox-paysummary is defined after  smallbox hence the 10px precedence

User · Answer

Also important to note is that when you have two styles on an HTML element with equal precedence  the browser will give precedence to the styles that were written to the DOM last     so if in the DOM    lt html gt   lt head gt   lt style gt  container-ext   width  100     lt  style gt   lt style gt  container   width  50px    lt  style gt   lt  head gt   lt body gt   lt div class  container container-ext  gt Hello World lt  div gt   lt  body gt       the width of the div will be 50px

User · Answer

AS is state in W3  W3 Cascade CSS  the orden that different style sheet are applied is the following  quote from W3 cascading section     user agent declarations user normal declarations author normal  declarations author important declarations user important    declarations   More information about this in the referred W3 document

User · Answer

Element  Pseudo Element  d   1      0 0 0 1  Class  Pseudo class  Attribute  c   1      0 0 1 0  Id  b   1      0 1 0 0  Inline Style  a   1      1 0 0 0    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

User · Answer

Here s a compilation of CSS styling order in a diagram  on which CSS rules has higher priority and take precedence over the rest     Disclaimer  My team and I worked this piece out together with a blog post  https   vecta io blog definitive-guide-to-css-styling-order  which I think will come in handy to all front-end developers

User · Answer

What we are looking at here is called specificity as stated by Mozilla      Specificity is the means by which browsers decide which CSS property   values are the most relevant to an element and  therefore  will be   applied  Specificity is based on the matching rules which are composed   of different sorts of CSS selectors       Specificity is a weight that is applied to a given CSS declaration    determined by the number of each selector type in the matching   selector  When multiple declarations have equal specificity  the last   declaration found in the CSS is applied to the element  Specificity   only applies when the same element is targeted by multiple   declarations  As per CSS rules  directly targeted elements will always   take precedence over rules which an element inherits from its   ancestor    I like the 0-0-0 explanation at https   specifishity com     Quite descriptive the picture of the  important directive  But sometimes it s the only way to override the inline style attribute  So it s a best practice trying to avoid both

User · Answer

First of all  based on your  extend directive  it seems you re not using pure CSS  but a preprocessor such as SASS os Stylus   Now  when we talk about  order of precedence  in CSS  there is a general rule involved  whatever rules set after other rules  in a top-down fashion  are applied  In your case  just by specifying  smallbox after  smallbox-paysummary you would be able to change the precedence of your rules   However  if you wanna go a bit further  I suggest this reading  CSS cascade W3C specification  You will find that the precedence of a rule is based on    The current media type  Importance  Origin  Specificity of the selector  and finally our well-known rule  Which one is latter specified

[html] What is the order of precedence for CSS?

Examples related to html

Examples related to css