class name in Rails helper

Question

I added a 'map' class to a Rails image_tag helper like this

<%= image_tag "http://maps.google.com/maps/api/staticmap?size=300x200&sensor=false&zoom=16&markers={{ latitude }}%2C{{ longitude }}", :class => "map" %>

I tried to set styles specific to that image with the map class, so that the image wouldn't be visible by default:

img {
border: solid 0px black;
}

img .map { visibility: hidden

}

However, the map class image is visible by default

The 'map' class is visible in the html.

<img alt="Staticmap?size=300x200&amp;sensor=false&amp;zoom=16&amp;markers=40.6891947%2c-74.0444169" class="map" src="http://maps.google.com/maps/api/staticmap?size=300x200&amp;sensor=false&amp;zoom=16&amp;markers=40.6891947%2C-74.0444169">

When I inspect the element, Chrome console shows that its only the styles from img that are registering, not img .map

Can you see what I might be doing wrong?

Answer 1

Your CSS should say

img.map {
    visibility: hidden
}

With the space it is the CSS element element selector. It selects elements inside elements. You are looking to use the class selector.

Answer 2

Remove the gap between IMG & .map class . Write like this:

img.map { visibility: hidden}

because with space the terminology is changed img .map it's said class .map within the img tag & img.map it's said class .map with img tag.

Read this for more What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?