Show Hidden Element With Css

I have a div like this:

Some mobile content

This content is hidden by default (core.css): .mobile{display: none;} Now, I want to show this d

Solution 1:

Since you use the same selector, it will always use the last called selector.

See this fiddle : http://jsfiddle.net/9KtHg/

It is working perfectly since the media query is called last (so it override the CSS when the condition are met).

But here : http://jsfiddle.net/9KtHg/1/

It is not working since the display:none is last and will override the other CSS.

To avoid that, you need to use greater specificity selector in the media query like :

div.mobile <-the tag name containing class='mobile'
[.][#][tag]parent .mobile <- use the parent in the selector
.mobile{display:block!important}<- using important is a bad pratice, avoid it.

You could also include the core.css before your CSS files containing your mediaqueries.

In conclusion, welcome to the fabulous world of CSS override!

By the way, CSS mean "cascading style sheets". As it said in its name, it work as a cascade where the last declared CSS will be used!