Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overriding css style?

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?

like image 405
Miomir Dancevic Avatar asked Oct 10 '13 17:10

Miomir Dancevic


People also ask

What is overriding CSS?

If you can see your new CSS in the Styles pane, but your new CSS is crossed out, it means that there's some other CSS that is overriding your new CSS. In CSS terminology this concept is called Specificity. Chrome DevTools can help you find the old CSS that is causing your new CSS to not be applied.

Can you override CSS?

To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.

How do you override a div in CSS?

To override an attribute that a CSS class defines, simply append a new inline style after the DIV's class definition.

How do I override SCSS style?

Overriding the Base Styles scss . In order to override a base style file, you need to copy over the chain of files that is used to import it.


2 Answers

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%; } 
like image 51
Dvir Avatar answered Sep 20 '22 04:09

Dvir


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.

like image 42
dthree Avatar answered Sep 18 '22 04:09

dthree