CODEWITHSUNDEEP
cssproperties
Déjà vu
Déjà vu

Reputation: 28850

CSS: same rule, are properties always run in order?

There are tons of questions and answers about rules precedence. The question here is about the execution by the browsers of CSS properties within the same rule.

Intuitively, I've always considered that properties of a rule are run in order, by the browser.

For instance,

  #somediv {
    margin:0;
    margin-bottom:10px;
  }

is rendered as margin:0 0 10px 0; (and never margin:0;) in the browsers I use (recent Chrome, FF and Safari, basically). Meaning the second property margin-bottom overrides the previous margin property (that sets all margins to be 0).

But can I consider this to be always true, in all browsers (IE, I'm looking at you)?

Upvotes: 3

Views: 255

Answers (5)

Hussain Akhtar Wahid 'Ghouri'
Hussain Akhtar Wahid 'Ghouri'

Reputation: 6617

yeah the one written after always overrides the previous one if u change the order of the lines tha u have written , ur rerult will be reverted and second line will always lead the first one , so if u have two or more css filed then u should not apply sme styling on the same element in diff css or else u will get some strange css output just depending on the order of the css file included .

Upvotes: 1

BoltClock
BoltClock

Reputation: 724462

Yes, this is expected behavior, and part of the cascade in CSS. You're simply overriding one of the components of the margin shorthand with an individual margin-bottom value.

Note that it does not erase the entire margin shorthand declaration completely! Remember that the shorthand you have above can be rewritten as either this:

margin: 0 0 0 0;

Or this:

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

So margin-bottom: 10px will simply override the margin-bottom above.

Note also that IE6 and older will not give precedence to !important declarations within the same rule (but it will honor them in separate rules). But since that's an ancient browser, there's not much of a concern to be honest. This fundamental rule has been well-defined and unchanged for more than 15 years, so browsers have had ample time to implement it correctly and no excuse to fudge it, IE included.

Upvotes: 6

Mr. Alien
Mr. Alien

Reputation: 157414

Yes if you are declaring two same property but different value than browser will pick up the last declared value for the property

So for example if you are using this

div {
   background-color: #ff0000; /*Red*/
   background-color: #00ff00; /*Green*/
}

the browser will pick the green because it is declared last

Upvotes: 2

Oleg
Oleg

Reputation: 25008

Yes, this is the correct behaviour according to w3c specification:

If two declarations have the same weight... the latter specified wins

In your example margin-bottom would be set as 10px.

The rendering engine does not actually care where the same-specificity property values come from (they could have been set inside of the same rule like in your example, or inside of two rules with identical selectors, or different selectors). If two declarations have the same computed weight, the latter one wins:

<style>
  .container span {color:red;}
  .content span {color:blue;}
  div .inner {color:green;}
  p a {color:orange;}    
</style>
<div class="container">
  <p class="content">
    <a href="#" class="button"><span class="inner">Hello world!</span></a>
  </p>
<div>

What colour would the text be rendered in? The first three rules have identical specificity, so "Hello world!" would be rendered in green. This gets trickier with shorthand properties though!

Upvotes: 4

Mihai Matei
Mihai Matei

Reputation: 24276

Yes.. the css properties are overwritten in the order they are loaded in all browsers

Upvotes: 1

Related Questions