-1

I am setting the width on an image:

<img class="someImageClass" src="someImage.jpg">

I use the following css styles:

.someImageClass {
  max-width: 30px;
}

But I also have a global css style for images as well:

img {
  max-width: 100%;
}

The max-width in the someImageClass style is being overwritten by the one that is global and I don't understand why. If I apply the css class directly on the element, it should take precedence over any global style.

Johann
  • 27,536
  • 39
  • 165
  • 279
  • _“The max-width in the someImageClass style is being overwritten by the one that is global and I don't understand why”_ - and with the example code snippets you have shown, no one will - because those do not even reproduce the issue, https://jsfiddle.net/1jcf7s1d/ – CBroe Aug 23 '17 at 10:48
  • @CBroe Do the world a favor and take up a different career or seek some psychiatric treatment. – Johann Aug 23 '17 at 11:24

2 Answers2

2

try

img.someImageClass {
    max-width: 30px;
}

There must be another rule using img.className somewhere. But in normal cases you can calculate the specificity of CSS rules. How is explained here https://www.w3.org/wiki/Inheritance_and_cascade#Specificity

caramba
  • 21,963
  • 19
  • 86
  • 127
  • That works. Can you explain why I need the img. attached? – Johann Aug 23 '17 at 10:41
  • @AndroidDev I'll update in a bit, just searching for the correct link. It's normal CSS specificity behaviour – caramba Aug 23 '17 at 10:41
  • @AndroidDev actually, whilest calculating the specificity there must be another rule using `img.className` else it would have worked. – caramba Aug 23 '17 at 10:56
-2

Are you aware of the term important ?

.someImageClass {
    max-width: 30px !important;
}
heysulo
  • 182
  • 3
  • 14
  • 1
    Noooooo, `!important` is used to overwrite `inline-styles` which is not the case here! – caramba Aug 23 '17 at 10:46
  • maybe you stick to one purpose. What this person need is to override the `max-width` for the `img`. Read [this question](https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean) It means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!' – heysulo Aug 23 '17 at 10:51
  • 1
    And in that question you are pointing a little further down the guy who wrote the answer says: "Using !important has its purposes (though I struggle to think of them), **but it's much like using a nuclear explosion**" – caramba Aug 23 '17 at 10:57
  • It's **bad practice** if you name your CSS class `someImageClass` and use it on a div or somewhere else. `someImageClass` should be under a tag. So explain me why use the inherit and cascade here ? – heysulo Aug 23 '17 at 11:06
  • I really doubt, that `someImageClass` is the real name used in the code, it's much more likely, that he just used this name for the example. An no, using important here is definetly the wrong approach, since you should avoid using important at all, and there are tons of other (better!) ways to achive this. – Matthias Seifert Aug 23 '17 at 11:31
  • Yes but the term `someImageClass` consist some additional data `someClass` don't have. Yes +1 for inheritance. – heysulo Aug 23 '17 at 11:38