CSS Image Class Question

I'm pretty new to CSS - and have a question about applying classes.

In our css - there's a rule that specifies:

.columns>div img{height:auto; margin-bottom:1em; width:300px}

So - any images that meet that criteria are automatically sized to 300px in width.

That works fine.

However - there's a sub image within that div that I want sized to 16px that's also coming up as 300px wide.

How would you fix that?

I figured something like:

.columns>div img .alternate {height:auto; margin-bottom:1em; width:16px}
or...
#alternate{height:auto; margin-bottom:1em; width:16px}

with the corresponding html being <img class="alternate">

but neither of those worked.

Help?  :)
LVL 2
erzoolanderAsked:
Who is Participating?
 
jonahzonaCommented:
Here is a quick mockup of what this would look like.

Image is included below.

<head>
<style type="text/css">
.columns img {
  height: auto;
  margin-bottom: 1em;
  width: 300px;
}

.columns img.alternate {
  height: auto;
  margin-bottom: 1em;
  width: 16px !important;
}
        </style>
</head>
<body>
<div class="columns">
<img alt="image" src="bg.png" />
<img class="alternate" alt="small image" src="bg.png" />
</div>
</body>

Open in new window

bg
0
 
jonahzonaCommented:
Add an !important so it doesn't get overridden.

.columns img .alternate {height:auto; margin-bottom:1em; width:16px !important;}

Open in new window

0
 
jonahzonaCommented:
Also, keep in mind that # is an ID, while . is a class.

So img#alternate would have to be <img id="alternate">

while img.alternate would be <img class="alternate">
0
 
nachopittCommented:
There should not be a space between "img" and "alternate" because you want to apply the style to all images within the alternate class:

.columns>div img.alternate {height:auto; margin-bottom:1em; width:16px}
0
 
erzoolanderAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.