Class overriding Main tag

Question

I have the following code on line 69 of my css

.container {width:1000px;margin:0 auto;padding:0 10px;}

And the following on line 119

main {margin:20px auto;}

However the element in my html which is <main class="container"></main>, the margin on .container is overriding the margin on main, even though main is loaded after it in the css. Can anyone tell me why this is???

possible duplicate of [CSS precedence](http://stackoverflow.com/questions/667223/css-precedence) — user2428118, Jul 03 '14 at 09:45

score 3 · Answer 1 · answered Jul 03 '14 at 09:43

3

Class selectors (like .foo) are more specific than type selectors (like bar). Specificity is used to determine the order in which rules are applied. Source code order is the tie break condition.

See the specificity rules in the CSS 2.1 specification for more detail.

answered Jul 03 '14 at 09:43

Quentin

914,110
126
1,211
1,335

I was searching everywhere for that page. Thanks! :) – dpDesignz Jul 03 '14 at 09:44

score 1 · Accepted Answer · answered Jul 03 '14 at 09:58

Priority is most important in css. High Priority is always gives for id selector and then class selector and then priorty comes for elemnent or tag selector

Priority

1) # - id selector

2) . - class selector

3) <> - element or tag selector

In the example

<main class="container"></main>

main is a tag and container is a class contain in a main tag. From css class selector(container) take more priority than element selector(main). so it overides the property of main tag.

Class overriding Main tag

2 Answers2