Two questions about CSSing inside the menus

Question

First, I would be glad if u tell me how can I assign a class(css) to default span tag that include the links inside the menu, created by WP control panel.

And second question is how to use @media queries to define different style of links inside a menus? If I'm using an image instead of the text in the menu, how can I apply different img for another resolution? Say, I got IMG_1 for higher than 999px width screen and IMG_2 for less than 999px screen. I definitely can't just img url from css... so how to make it work? I don't want to use background image as for link, it's ugly :/

Thanks!

UPDATE: Okay, so I think I answered my self the second question. I used span(in order not to go with div inside the span-the default tag comes with WP :/ ) as inline block element, and assign width and height to it, and use background image in the css. This way I can sure to make it with hover effect and also use proper @meta.

Answer 1

If you want your navigation span element to be a block, instead of inline element, just target it via css

nav > ul > li > a > span{
    display:block;
}

This is providing your HTML structure looks something like this:

<nav>
    <ul>
        <li>
            <a href="#" class="menu-link">
                <span>Home</span>
            </a>
        </li>
        <!-- other list elements go here -->
    </ul>
</nav>

Hope this helps.