Question

I’m trying to make a mobile version of my site. Here is the code for the “banner”:

<center>
    <div id="banner">
        <a href="./"><img src="graphics/banner.png" /></a>
    </div>
</center>

And using this CSS:

#banner img a {
    background-color: #ccc;
    border-bottom: 1px solid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
}

When I try it like that it won’t work. Everything that was written apparently gets ignored, but if I remove the a, it works normal. But I need it to do that just if the <img> is surrounded by <a>. Why it won’t work?

Answer 1

#banner img a means “An a element contained in an img element contained in an element with the id *banner“.

You want: #banner a img if you want to select the img element.