Which css property gets applied?

Question

 @media(max-width:1920px) {

    .callbacks_tabs {
        left: 45%;
    }

}
@media(max-width:1440px) {

    .callbacks_tabs {
        left: 50%;
    }

}

With above code for screen-width of for ex.- 1200px which property get applied?

Answer 1

For your example, they BOTH get applied as they have equal specificity. In such cases whichever declaration comes last is applied.

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.

Resize your browser to see this swap between blue (<=2000px) and red(<=600px)

@media(max-width:2000px) {
    html {
        background-color:blue;
    }
}
@media(max-width:600px) {
    html {
        background-color:red;
    }
}

But if you change the order, it will never be red however narrow you make the viewport since even 1px wide is still less than the the 2000px max-width:

@media(max-width:600px) {
    html {
        background-color:red;
    }
}
@media(max-width:2000px) {
    html {
        background-color:blue;
    }
}

You might find that using min-width is more appropriate. Or a combination of min-width and max-width:

@media all and (max-width: 699px) and (min-width: 520px)

Or you can set your default style and only override it if the viewport is at least x wide:

html {
    background-color:red;
}

@media(min-width: 600px) {
    html {
        background-color:blue;
    }
}

Answer 2

A screen width of 1200px will make the 50% rule take effect. It's under 1440 and its evident that is happening with a simple test, and resizing the screen to the required width and seeing the blue bar jump when you cross the 1440px threshold.

 @media(max-width:1920px) {

    .callbacks_tabs {
        left: 45%;
    }

}
@media(max-width:1440px) {

    .callbacks_tabs {
        left: 50%;
    }

}

.callbacks_tabs {
  position:relative;
  background:blue;
}

https://jsfiddle.net/bqah8zr0/