CSS Image Class Question

Posted on 2011-04-28
Last Modified: 2012-08-13
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}
#alternate{height:auto; margin-bottom:1em; width:16px}

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

but neither of those worked.

Help?  :)
Question by:erzoolander
    LVL 13

    Expert Comment

    Add an !important so it doesn't get overridden.

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

    Open in new window

    LVL 13

    Expert Comment

    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">
    LVL 13

    Accepted Solution

    Here is a quick mockup of what this would look like.

    Image is included below.

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

    Open in new window


    Assisted Solution

    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}
    LVL 1

    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now