CODEWITHSUNDEEP
css
Malasorte
Malasorte

Reputation: 1173

!important tag - the logic of it

Please help me with this...

Given this css:

/* General css */

.my_element {
height:50px !important;
}

/* Webkit-only css */

@media screen and (-webkit-min-device-pixel-ratio:0) {
.my_element {
height:100px !important;
}
}

/* Ipad specific css */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
.my_element {
height:200px !important;
}
}

Notice that height has the !important attribute in all cases.

Question: Will my_element have a height of 100px when viewed in webkit browsers? Will it be 200px when viewed on an Ipad? Or will it be 50 px on all devices and browsers?

Upvotes: 0

Views: 40

Answers (3)

Guffa
Guffa

Reputation: 700412

As all three styles have !important it won't make any difference between them. That will only affect their precedence compared to other styles that doesn't have !important.

For rules with the same specificity (same number of id, class and element selectors), the rules that come last will take precedence. That means that the webkit and iPad specific rules will take precedence when they are used.

Upvotes: 3

Maku
Maku

Reputation: 1558

If there is multiple styles with !important, the last one applied will be the one active on the element. And styles from single sheet apply in the order they are written.

So in your case, the height will have the last value applied. So 50px or 100px or 200px (depending which media query is active for aprticular browser).

Upvotes: 1

ABucin
ABucin

Reputation: 956

I would say that the height will vary depending on whether you're on an iPad or in a webkit browser.

Edited for clarity: what I meant is that it won't be 50px on all devices but 200px on iPad and 100px in webkit browsers.

Upvotes: -2

Related Questions