By using media query I would like to show the last element of the following list (2) when the screen width is above 768px.

Here is the jsfiddle like.
Here is the basic css code (1).

(1)

@media only screen and (min-width: 480px) {
    .menu li.hide{    
        visibility: none;
    }
}

@media only screen and (min-width: 768px) {
    .menu li.hide{    
        visibility: visible;
    }
}

(2)

<ul class="menu">
    <li>One</li>
    <li class='hide'>Nine</li>
</ul>​

By using media query I would like to show the last element of the following list (2) when the screen width is above 768px.

Here is the jsfiddle like.
Here is the basic css code (1).

(1)

@media only screen and (min-width: 480px) {
    .menu li.hide{    
        visibility: none;
    }
}

@media only screen and (min-width: 768px) {
    .menu li.hide{    
        visibility: visible;
    }
}

(2)

<ul class="menu">
    <li>One</li>
    <li class='hide'>Nine</li>
</ul>​

• javascript
• css
• media-queries

3 Answers 3

Try this - DEMO

@media only screen and (max-width: 768px) {
    body{
        background:#030;
    }
    .menu li{    
        font:12px Verdana;    
        width:100px;
        padding-left:10px;
    }
    .menu li:last-child{    
        display: none
    }
}

@media only screen and (min-width: 769px) {
    body{
        background: honeydew;
    }
    .menu li{    
        font:22px Verdana;    
        width:200px;
        padding-left:20px;
    }
}

You can set the min and max width on the media query:

 @media screen and (min-width: 480px) and (max-width: 768px) {

I've updated your jsfiddle: http://jsfiddle/yyQ5u/28/

It looks like the main problem was with the order of things and the actual media queries. I put your non-conditional CSS at the top of the CSS pane and the media queries below.

Then I tweaked the media queries which seemed to sort of cover each other:

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

and

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