Overriding css style?

Question

I look on Stack Overflow, and didn't find the solution, I know how to override style if style exists, just change its property. But now I have a strange style to override

Here is an example of what I have

First I have this one:

.slikezamenjanje img{
    max-width: 100%;
    max-height:150px;
    padding-right:7px;
}

Now I need to override that style with just this one:

#zoomTarget .slikezamenjanje img {
    max-width: 100%;
}

The problem is that first style appends second, but I don't want that, in this second style what I need is just one line, not to append from the first style?

Solution 1

Instead of override you can add another class to the element and then you have an extra abilities. for example:

HTML

<div class="style1 style2"></div>

CSS

//only style for the first stylesheet
.style1 {
   width: 100%;      
}
//only style for second stylesheet
.style2 {
   width: 50%;     
}
//override all
.style1.style2 { 
   width: 70%;
}

Solution 2

You just have to reset the values you don't want to their defaults. No need to get into a mess by using !important.

#zoomTarget .slikezamenjanje img {
    max-height: auto;
    padding-right: 0px;
}

Hatting

I think the key datum you are missing is that CSS comes with default values. If you want to override a value, set it back to its default, which you can look up.

For example, all CSS height and width attributes default to auto.

Comments

[dthree]

That's one hell of a class name.

[Miomir Dancevic]

What i got with this one, nothing, in second style i need to override max-height:150px; padding-right:7px; to NOTHING!

[dthree]

Now I understand you, Gorostas, check out my post.

[Miomir Dancevic]

Still got this max-width: 100%; probem?

[Dvir]

Maby instead of override css try to add another class to the element and then with css.

[cjd82187]

You shouldn't need !important, since #zoomTarget .slikezamenjanje img is more specific than .slikezamenjanje img