How to override css for img tag


Tags: html,css

Problem :

Following were my css for img:

img {
    border: none;
    max-width: 100%;
    height: auto !important
}

At the bottom of the style, I override the specific img as:

.locals-list>img {
    height: 35px;
}

Here is my html:

<div class="eas-footer">
    <div class="wrap cfx">
        <h6 class="know-your-city" style="text-align: center;">Supported by</h6>
        <div class="locals-list">
           <a href="http://www.indonesia.travel" target="_blank"><img src="http://cdn.goasean.com/assets/content/sponsors/_normal/logo_wonderful_indonesia_2014.png" alt="{title}" data-pin-nopin="true"></a>                   
        </div>
    </div>
</div>

Now the problem is, my new height changes is not taking place. I am still getting height: auto !important. Thanks!



Solution :

Adding another height with !important (height: 35px !important;) at the end of the CSS will override the previous height.

Also i have changed .locals-list>img to .locals-list img. Refer below code.

img {
  border: none;
  max-width: 100%;
  height: auto !important;
  border: 1px solid green;
}
.locals-list img {
  height: 85px !important;
}
<div class="eas-footer">
  <div class="wrap cfx">
    <h6 class="know-your-city" style="text-align: center;">Supported by</h6>
    <div class="locals-list">
      <a href="http://www.indonesia.travel" target="_blank">
        <img src="http://cdn.goasean.com/assets/content/sponsors/_normal/logo_wonderful_indonesia_2014.png" alt="{title}" data-pin-nopin="true">
      </a>


    </div>
  </div>
</div>


    CSS Howto..

    css: how to remove pseudo elements (after, before, …)

    How to decode base64-encoded font information?

    How can I align unsorted list horizontly ?

    How is padding-top as a percentage related to the parent's width?

    How can I add specific css id to parent menu with php or javascript

    Z-index issues - How to bring a child element onto the parent's below element?

    How can I get to see the full image in the background?

    How to get the authored style properties of an element?

    How to stop floating right image inside div bleeds over in Google Chrome

    CakePHP call really old css file. How to refresh

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How to use custom css file for layout of a module in Yii2

    how to ensure that each time a css class name changes from the previous, it is applied a specific style

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    How to delete css right or bottom on drag

    How to get the text in the custom dialog to be centered vertically

    How to segment a circle with different colors using CSS

    How to achieve straight shadow with CSS?

    How to target flex item by its order number?

    How to persist checking the screen width in Javascript

    JavaFX: How do I set a Background Image in code?

    How to use css3 transition on hover for td?

    How to align a label to the “BOTTOM” of a div in CSS?

    How to increase a CSS value by the value of a JS variable?

    How to zoom in / out depending on browser height, using CSS zoom property? [closed]

    CSS Flexbox : How to construct a specific layout

    How to change a class CSS with a Greasemonkey script?

    How to style for first class css

    How much client-side programming is needed when doing server-side programming?

    How to declare a div in @page @top-left