CODEWITHSUNDEEP
css
cade galt
cade galt

Reputation: 4171

How to override applied CSS rules in media queries?

I use jQuery to animate my page - a function called slideToggle(). I can view this in the debugger and see the styles applied to my <nav> element.

The problem I'm facing, is that after I call slideToggle ( a second time ) it sets display:none to <nav> as it correctly should.

However, If I expand the screen again, the menu does not re-appear in its normal state as it should.

I set it in the media query but it is ignored.

@media screen and (max-width: 1000px){

/* This does nothing but I want it to turn the display on.
*/

nav {
  display: block;
 }

}

Upvotes: 4

Views: 35303

Answers (5)

Quentin
Quentin

Reputation: 944294

Media queries are irrelevant here. They don't affect the cascade at all.

Inline rules always trump rule-set rules unless the rule-set rule is !important and the inline rule is not.

Upvotes: 6

Vincent van Rooijen
Vincent van Rooijen

Reputation: 19

You can add a class in the media query and call addClass in your function.

By the way You set display: block; for nav when max-width: 1000px It should be MIN-width if you want to display the nav when the screen widens.

Upvotes: -1

Timmetje
Timmetje

Reputation: 7694

To answer the question can I override inline-css? ... Yes, by using !important.

Your real question:

By adding !important to your media query when the screen is big again. see following snippet (run in full screen and make screen smaller/bigger)

(function(){
  $('button').on('click', function(e){
    $('#test').slideToggle();
  });
})();
		@media screen and (min-width: 1000px) {
			ul {
				height:50px;
				background-color: red;
				width: 100%;
			}
			li {

				display: inline-block;
				height: 50px;
				line-height: 50px;
				float:left;
				margin-left: 50px;
			}
			#test {
				display: block !important;
			}
			button {

				display: none !important;
			}
		}

		@media screen and (max-width: 1000px) {
			ul {
				background-color: red;
				width: 100%;
			}
			li {
				display: block;
				height: 50px;
				line-height: 50px;
			}
			#test {
				display: none;
			}
			button {
				display: block;
			}
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
	<ul>
		<li>This</li>
		<li>Is</li>
		<li>a</li>
		<li>menu</li>
	</ul>
</div>
<button >Toggle menu</button>

Upvotes: 8

Subodh Sharma
Subodh Sharma

Reputation: 303

this will work 100%;

@media screen and (min-width: 1001px){

/* This does nothing but I want it to turn the display on.
*/

nav {
  display: static !important;
 }

}

Upvotes: -1

user1438038
user1438038

Reputation: 6079

In general, the most specific CSS selector will be applied to an element. The cascading order is defined as follows (highlight by me):

  1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.
  2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
    • user agent declarations
    • user normal declarations
    • author normal declarations
    • author important declarations
    • user important declarations
  3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
  4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Furthermore, you can forcefully apply a style using the !important keyword. You should not use the declaration, however, unless it is absolutely necessary after all other avenues have been exhausted. I recommend reading this article if you want to learn more about the !important keyword, when to use it and why to avoid it.

Upvotes: 2

Related Questions