CSS - Exclude a child from inheriting parent style

1
votes

I have 3 images in a div with class "carousel" that are background images. I have defined a style for them as follows:

.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

I don't want this style to apply to another image within the div with class carousel (i.e. logo image) as the following style should apply:

.logo img{
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

My HTML is as follows - how can I exclude the logo image so that it doesn't use .carousel img style? I tried overriding, but not all of the properties are the same between the 2 style definitions so some of the properties still take effect from the parent (.carousel img).

<div id="myCarousel" class="carousel">
    <img src="/resources/images/background.jpg"/>" /> 
    <div class="container">
        <div class="span5">
            <div class="logo">
                <a href="/" title="xxx">
                    <img  src="/resources/images/logo.png"/>
                </a>                                  
            </div>
1
csscss-selectors

1 Answers

0
votes

Put class names on your IMG tags and target those directly.

.logo img.thisStyle {
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
}