Why Media Queries Has Less Priority Than No Media Queries Css

Why media queries has less priority than no media queries css

This has to do with the way the Cascade in CSS works. When two conflicting rules target the same element, the browser uses the rules of the cascade to determine which one to apply.

Selector specificity is the most important part of this: styles with a more specific selector will override those with a less-specific selector... but
media queries do not change the specificity of your selectors. This means that your two selectors have the same specificity. When that happens, the one appearing later in your stylesheet will override the earlier one.

Your easiest and best fix is to swap the order of your rulesets:

.logo img{
    width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}

This way, the media query comes later, and will override the earlier rule when the media query matches the viewport size.

If that's not an option for some reason, you will need to increase the selector specificity of the rule you want to win. Changing it to the following would work:

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }

}
.logo a img{
    width: 100%;
}

This way the selector now has two tags and a class, or [0,1,2], making it more specific than one tag and one class, or [0,1,1] (the zero in each of those indicates no ids, which are highly specific).

Do not use !important to fix specificity issues like this. If you need to override the style again elsewhere, the only way to do it is to add another !important. This will eventually lead to !importants all over the place, and then you will still need to deal with the specificity of the selectors.

What is wrong with media queries on different selectors?

This is because of the CSS specificity rule .wrapper .inner .left .text .sample-text this class has more specificity value than .sample-text

.wrapper .inner .left .text .sample-text {
    color: red;
}

@media screen and (max-width: 800px) {
    .wrapper .inner .left .text .sample-text  {
        color: green;
    }
}

FYR check this link
https://www.w3schools.com/css/css_specificity.asp

Why does the order of media queries matter in CSS?

That's by design of CSS — Cascading Style Sheet.

It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).

So, given this CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

if the browser window is 350 pixels wide, the background will be blue, while with this CSS

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.

Finally, with

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

or

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

the background will be blue (with a 350 pixels wide window).

Why are my media queries not working properly?

Just as Edric mentioned above: First goes the rule itself, then its media query

.bar{
  margin:0 auto;
  width:38.5%; 
  height:43px;
  border-radius:27px;
  border:1px solid #dcdcdc;
  max-width: 100%;}

.searchbar{
  max-width: 100%;
  height:35%;
  border:none;
  width:81%;
  font-size:14px;
  outline: none;
  margin-left:10% ;
  background-color:transparent;
  margin-top: 1%;
  max-width: 100%;
  min-width: 70%;}

.voice{
  height:50%;
  position:relative;
  top:30%;
  max-width: 100%;}

.magnif{
  height:60%;
  position:relative;
  margin-top: -9%;
  margin-left: 2%;}


.button1{
  border:none;
  color:#3c4043;
  font-size:90%;
  border-radius:5%;
  outline:none;
  margin-left: 41%;
  display: inline-block;
  margin-top:0.02%;
  height:50%;
  width: 9.1%;
  padding: 9px 9px;}

@media only screen and (max-width: 600px) {
div.bar{min-width: 200px;}
div.searchbar{min-width: 200px;}
div.button2{min-width: 21%;}
div.button1{min-width: 21%;}
  }

Oh, and you better always design for mobile first.

Why is my media query rule not being prioritized?

The rule at line #112 in index.css is also applied by #sliderContainer and not by nav li, as you state in your question (it can be seen in the image you posted). Because it is met later and has same specificity, it applies.

If you place !important on a rule, you'll probably need to use !important when trying to override it, and before you know it, half your rules will be !important and fixing responsiveness is going to be a nightmare. Either slightly increase specificity of your rule or change their order.

Very important note: @media queries do not add any specificity to CSS rules. They just make them apply (when conditions are true) or not (when not true).

Useful note: A very good technique to always keep specificity of your selectors as low as possible is to place your custom stylesheets last inside <head>, after any theme/libraries/plugins stylesheets. Whenever you need to override anything, you just copy-paste the selector from where it is currently defined, and only placing it in your custom stylesheet will make it have priority without higher specificity.

i was trying to make my grid responsive using grid-template and media query

Media query rules don't take precedence over other rules, they still work within the context of the cascade. Just move the media query below the original .parent styles.

.parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  grid-template-areas: "first first" "second third";
}

@media (max-width:800px) {
  .parent {
    display: grid;
    grid-template-columns: 100px;
    grid-template-rows: 50px 50px 50px;
    grid-template-areas: "first" "second" "third";
  }
}


.first {
  grid-area: first;
  background-color: blue;
}

.second {
  grid-area: second;
  background-color: red;
}

.third {
  grid-area: third;
  background-color: green;
}

<div class="parent">
  <div class="first div">Lorem ipsum dolor sit amet </div>
  <div class="second div">Lorem ipsum dolor sit amet</div>
  <div class="third div">Lorem ipsum dolor sit amet</div>
</div>

.button_one {
  background-color: blue;
}

@media screen and (max-width: 600px) {
   .button_one {
      background-color: red;
   }
   
   .button_two {
      background-color: green;
   }
}

<div>
      <button class="button_one"> Button 1 </button>
      <button class="button_two"> Button 2 </button>
</div>

for screen 200px < x < 800px do this {
  bla bla bla
}
but... wait a second.. forget about it, do this for all screens {
  bla bla bla
}

for screen 200px < x < 800px do this {
  bla bla bla
  !do not listen to me if I will ever give you any other instructions
}
but... hey dude, want any instructions? Can you do this for all screens? {
  bla bla bla
}

for all screens do this {
  bla bla bla
}
but for screens 200px < x < 800px do this {
  bla bla bla
}

@media (max-width: 800px) {    .bad {        background-color: green;    }}
.bad, .good {    width: 100px;    height: 100px;    background-color: firebrick;}
@media (max-width: 800px) {    .good {        background-color: green;    }}

<div class="good"></div><div class="bad"></div>