The sequence of execution of CSS

Question

I am so curious to know the sequence of execution of statements in the CSS file. I have the following CSS in the CSS file :

/* screen width larger than 800px */
@media screen (min-width: 800px) {
     .indexphototd {
            width:200px !important;
        }
     .indexphoto {
         width:200px !important;
      }
}

/* screen width larger than 1200px */
@media screen (min-width: 1200px) {
     .indexphototd { 
            width:300px !important;
        }
     .indexphoto {
         width:300px !important;
      }
}


/* default setting */
.indexphototd { 
    width:500px !important;
   }
.indexphoto {
    width:500px !important;
   }

In the code above I have declared 2 types of settings of 2 classes in 2 different screen sizes, and AFTER that I have mentioned 2 statements without the restriction on the screen sizes (that is, default).

My objective is, the screen size does not fall into those 2 groups above, it has to take the default value set in the 3rd one below.

But I am wondering if the default settings would override the screen-size specific settings since I have inserted the default setting at the very end. Do I have to put it at the beginning? Could you please let me know the sequence of execution in the CSS. I know CSS is not a programming language. I am new to web development and learning all these minute stuff. Please help me. Thanks.

Isaac

Why don't you just test it out?

Explosion Pills
– Explosion Pills

2013-05-14 21:51:33 +00:00
Commented May 14, 2013 at 21:51 — Explosion Pills
– Explosion Pills, Commented May 14, 2013 at 21:51

dtech · Accepted Answer · 2013-05-14 21:50:59Z

11

Later statements override earlier ones, so you'll have to go general to specific.

/* General CSS here */

/* CSS for min-width 800 here, overides general */

/* CSS for min-width 1024 here, overides both general and 800 */

answered May 14, 2013 at 21:50

dtech

14.2k11 gold badges52 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrift · Accepted Answer · 2013-05-14 21:58:24Z

6

CSS is parsed from top to bottom, so if two selectors are of equal specificity and match the same element, the latter in the stylesheet will win.

edited May 14, 2013 at 21:58

answered May 14, 2013 at 21:51

Adrift

60k12 gold badges98 silver badges92 bronze badges

2 Comments

dtech Over a year ago

Don't you mean if two or more selectors match an element the latter in the stylesheet will be applied? e.g. p.blue { color: blue; } p { color: red; } p and p.blue are different selectors but both apply to <p class="blue"> and the last one will be override the first.

Arbel Over a year ago

@dtech Actually in your example, the last one won't override the first one, since the first one is more specific to the targeted element. See it here jsfiddle.net/GY69b

Turnip · Accepted Answer · 2013-05-14 21:50:49Z

3

Your defaults must be declared before the media queries.

CSS is "executed" in order. You want the media queries to override the defaults in specific instances so you must declare them after.

answered May 14, 2013 at 21:50

Turnip

36.8k15 gold badges92 silver badges118 bronze badges

Collectives™ on Stack Overflow

The sequence of execution of CSS

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related