I googled a little bit and I couldn't find the answer.
My question is: does stacking !important works in some way? Or can I achieve the same functionality in another way? I'm aware that it's not a good practice
Example, say I have:
.myOuterDiv
{
margin-left: 5px !important;
}
.myInnerDiv
{
margin-left: 10px !important;
}
It's obvious that the content of the inner div will have a margin of 10px, but can I add another important such as
.myOuterDiv
{
margin-left: 5px !important !important;
}
I wanna do exactly that, override the inner important so I can have a margin-left of 10. Can I do it like this or in some other way?
No, you cannot stack !important.. it doesn't work that way.
!important can be avoided a majority of the time, there are usually alternatives.
You can always override a CSS property by using a more specific selector.
If you have a rule being applied as .myOutterDiv { some-property: some-value !important; }, all you need to do is actually make yours have more weight. You can do that by doing, for example, div.myOutterDiv { some-property: some-other-value !important; }
Edit: You can read more details on CSS Specificity Value
Related
I'm using carousel slider more than two times and its .item height is 100%. I had to adjust the main slider on specific height, so i added a class .custom-slider in header tag put the style with !important tag, because there was already 100% height .
.custom-slider {
height: 645px !important;
}
Its adjusted and working fine. Now I have to adjust the on different resolution, so i have to reduce the height 645px to 496px, but due to !important property new added height does not working.
I'm trying following style on 1024 reslution, but its not working.
.custom-slider {
height: 496px !important;
}
This accepted answer is well explained, but i didn't resolve my issue, can any guide me regarding this. I would like to appreciate.
Change the style to max-height and remove the important!
.custom-slider {
max-height: 645px;
}
You could also make the selector more specific by adding the tag or a parents id/class. This would give the style a higher priority.
body div.custom-slider {
max-height: 645px;
}
If your trying to do this within the same resolution ( without using media queries ) you should be able to add a second class and give that a defined height as well - it should overwrite the first one. For example:
<div class="custom-slider secondary-height"></div>
.custom-slider.secondary-height {
height: 496px !important;
}
please check this: http://codepen.io/anon/pen/LGmrwZ
when you define a media query, it will catach the relevant one.
if you go from bottom up, only the relevant !important will catch.
and since they have same "cascading juice" the winner will be:
the one that have the appropriate media trageting and the one that comes last, so combining them will solve the issue.
scss example
.custom-slider{
width:100px;
border:1px solid red;
#media (min-width:700px) {
height: 20px !important;
border:1px solid green;
}
#media (min-width:900px) {
height: 80px !important;
border:1px solid blue;
}
}
by the way, if your css is loaded after the slider's css, you do not need !important.
same goes if you add a parent container to your css.
I have a button that is displayed in a lot of pages of my website (With an automated javascript Widget).
I want this CSS :
.app.programEditor .col-2 .actions .widget.bt-flat.programs > .bt-flat-icon {
}
to be applied, and not this one :
.app.programEditor .actions .widget.bt-flat > .bt-flat-icon {
left: 145px !important;
top: 19px !important;
But instead, what happens, is the two css are applied, and as a result I get the second element that overwrites what I want to do with the first CSS ( A blank css with no rules )
Please I really need your help
The root cause of your problem is the poorly written rule that uses !important. This is an excellent example of why not to use !important. If at all possible, try to understand why !important was thought to be needed there, and see if you can remove it.
But if you are left fighting against an important rule, your only choice is to fight fire with fire, and toss back an !important of your own, in a rule designed to take precedence either because it is more specific (in this case, your override rule has seven classes, to the original rules's six, so it is more specific), putting it later in the file if it has the same specificity, or if you have no other choice use the various tricks available to jack up the specificity.
Having said that, overall this CSS seems to be poorly structured, verbose, and inefficient.
.app.programEditor .actions .widget.bt-flat > .bt-flat-icon {
First, if .app is a class applied to your entire application, it is probably not necessary. If .actions only occurs within .app.programEditor, then the latter is not necessary at all. If .bt-flat can only apply to widgets, then instead of widget.bt-flat you can just write .bt-flat. If .bt-flat-icon can only occur within .bt-flat, as seems likely, then .widget.bt-flat may not be necessary. And so on. In general, instead of writing down every single class in the HTML hierarchy in your CSS rules, try to limit selectors to those necessary to unique select the element you want. In this case, for example, it is possible your rule could be written as simply as (just an example):
.programEditor .actions .widget > .bt-flat-icon {
Second, the magic numbers 145 and 19 are a massive code smell. They are probably connected to other magic widths and heights elsewhere in the CSS, and would have to be changed if those change. What do the 145 and 19 mean? Perhaps they are actually a percentage of some underlying dimension. In other words, maybe some element is 160 pixels wide, and we want to place the icon to the upper right. In that case, instead of hard-wiring the 145, you can either use a percentage, or specify a right property, or use the transform property perhaps, so no matter how the width changes--such as with the introduction of .col2--the icon remains in the right place with the original rule.
You can simply change it to position:static this is just a demo. Otherwise, if you understand concept of Specificity very well, then there was no need for this question.
$('#change').click(function() {
$('.one').css("position", "static");
$('.one').text("Position changed to Static")
});
.container {
width: 90%;
margin: 50px auto;
position: relative;
border: 1px solid #000;
display: block;
height: 200px;
overflow: hidden;
}
.one {
width: 150px;
height: 150px;
background: tomato;
position: absolute;
left: 118px!important;
top: 30px!important;
display: block;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="one">
Positioned using absolute or relative</div>
</div>
<button id="change">Change CSS</button>
If many rules exist, the first one takes precedence, but if the last one is more specific, it will override the first one. BUT if the first one is less specific AND has !important that one will take precedence. :) To make matters more complicated, if both rules has !important the most specific rule will take precedence.
So the easy solution here, if you cannot change the already existing rule, just add !important to the code you can edit. If that doesn't work, try to get your code processed earlier in the code than the other one.
.app.programEditor .col-2 .actions .widget.bt-flat.programs > .bt-flat-icon {
left: 40px !important;
top: 40px !important;
}
Is there a way to simplify the following css rule so that .x-grid-row selector won't have to be repeated?
#OpenRequestListGrid .x-grid-row, #MyRequestListGrid .x-grid-row {
line-height: 13px;
padding: 0 1px;
vertical-align: top;
background-color: #BBB;
}
Important issue here is that I don't want to specify .x-grid-row by itself as this rule is from a larger library.
Note: maybe I wasn't clear the first time but I don't want to use .x-grid-row as this will effect other grids that I want to leave alone. I would like to target just my two grids. What I am aiming for is not repeating the same config twice one for each grid ID.
HTML sample :
<div id="dontChangeMe" class="x-grid-row">
<div id="OpenRequestListGrid" class="x-grid-row">
<div id="MyRequestListGrid" class="x-grid-row">
CSS doesn't have variables, but when you want to select all elements .x-grid-row in your document, you should simplify it to:
.x-grid-row {
line-height: 13px;
padding: 0 1px;
vertical-align: top;
background-color: #BBB;
}
Or just search for a common parent of your .x-grid-row when talking about a partial scope and use it like:
#common-parent .x-grid-row {
...
}
or
.common-parent .x-grid-row {
...
}
or any other css selectors ;)
EDIT
I just reread your question and you could also use a global selector like .x-grid-row {...} when you want to address a lot of elements and just specify more selectors like #inner-box .x-grid-row { ... } to change values back to default for only few elements.
How about just using .x-grid-row or using a selector which is a parent to both #OpenRequestListGrid and #OpenRequestListGrid.
So the Answer is there really isn't another way. Repeating element id and then the same selector is necessary. Thanks to all those who replied.
Short question is: is the following (an id under another id) not recommended for bloating up the CSS file size?
#product-box #product-photo { width: 200px }
details:
Sometimes in SASS, we might have
#product-box
margin-top: 20px
#product-photo
width: 200px
this way, it means it is "nested" -- that is, #product-photo's style of width 200px is only true within #product-box, and the CSS generated from the SASS is
#product-box { margin-top: 20px }
#product-box #product-photo { width: 200px }
but here we have a redundant #product-box before #product-photo, because #product-photo by itself can uniquely identify the element already.
As a result, the CSS file can become bloated. I wonder if it is recommended to un-indent #product-photo in the SASS file, so that it doesn't need to be nested?
I think we could have a .photo class inside #product-box instead... is it true? But in some cases, we might have 2 photos, or 2 li inside a #product-box, and so using a class cannot uniquely identify an element. If we use jQuery, it is true we can say $('#product-box li:eq(2) to get to any element, but it may introduce bug if somebody add another li without knowing the jQuery code depends on it. Having an id will prevent such bug from happening.
if you're selecting an element by its id, you don't need to have a nested selector - the id has to be uique everytime. if you have a class that has a different style depending on it's parent, you have to use such a nestes selector (but, if a class has the same style in every case, you can drop the parent-selector, too).
example:
#product-box #product-photo { width: 200px }
is the same as
#product-photo { width: 200px }
you could also use a class for that:
.photo { width: 200px }
but: if a photo has a different size in some cases, you have to do something like this:
#product-box .photo { width: 200px }
#another-box .photo { width: 150px }
or, alternatively, define a "default" and a special case:
.photo { width: 200px } // the default
#another-box .photo { width: 150px } // special size for photos inside #another-box
note: i have no idea how to do this in sass (i have no idea what sass is), but i hope this is helping you anyway.
note2: you shouldn't worry about this small effect on the css file-size until you have realy, realy, realy much traffic on your site - it's much more important that everything is readable and easy to understand, otherwise you will get in hell if you have to change something in the future (also, if you wan't to decrease you filesize as much as possible, why do you use such long ids? for breaking that down, wouldn't it be the best to use #a #b #c #d... and so on?)
I have defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:
.background_highlite{
background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
background-color: rgb(201, 179, 156); /*Moose Mousse*/
}
Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.
Something like:
textarea{
height:50px;
background-color: background_highlite /* want to feed forward to keep the rgb in one place */
}
Is this possible with CSS?
People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.
You can assign all the elements the same class, and then set the background color in the class's CSS:
<textarea class="background_shadow">blah</textarea>
Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:
<textarea class="background_shadow another_class something_else">...</textarea>
Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.
Sorry, no. CSS does not support variables, or chaining.
however, there is a javascript library that allows that. http://lesscss.org/
The best you can do would be
.hilight textbox {
background: black;
}
textbox {
color: pink;
}
.background_shadow {
background: grey;
}
Or, of course, you could add the .hilite class to your div.
You have two options to work with:
Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.
For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.
In this method you can always use some human readable rule like:
.blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.
Also what I realy like in preprocessors is that you can right code, as here:
.specialClass extends .basicClass {} // see more at extends
.selector {
a {
display: block;
}
strong {
color: blue;
}
} // see more at children
or what you needed is vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
} // see more at vars