I want to override default Dropdown properties that belong to react semantic UI
Here is my dropdown:
<Dropdown
placeholder="User"
selection
compact
options={userOptions}
/>
The text in my dropdown has too much padding so in my CSS I removed it like so:
.default.text {
font-size: 10px;
padding: 0;
}
I got rid of the padding from the Dropdown icon as well:
.dropdown.icon {
padding: 0 !important;
}
However, as you can see this only worked when I used !important
Related questions:
How come the icon padding only works by using !important -- the text padding did not need !important
I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?
How come the icon padding only works by using !important -- the text padding did not need !important
It depends on how styles are defined inside react semantic UI, don't forget, that CSS is Cascading Style Sheets, so in some cases you need !impotrant to override styles, in other you're not. For example:
p {
color: red;
}
p.colored-1 {
color: blue;
}
p.colored-1 {
color: green;
}
p {
color: red;
}
p.colored-2 {
color: blue !important;
}
p.colored-2 {
color: green;
}
<p class="colored-1">COLOR</p>
<p class="colored-2">COLOR</p>
I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?
Don't use !important if it's not really necessary, but if there is no other way to override styles - !important will help you.
CSS properties have levels of power called specificity. The stronger specificity, the more it will override other weaker definitions. So, react is probably using strong specificity which override your definitions. Using !important gives a very strong specificity level which wins the ones react is using. Look in the dev took for the winning rule and give an equal or stronger specificity in your style sheet.
So for instance the rule that sets the padding is:
.ui.dropdown .menu>.item
you'll need to override that rule yourself in your style sheet, with the property of padding: 0.
That'll work because your rule will be loaded after the Segment UI rule, and thus override it.
Giving !important considered bad practice because it's very strong and very hard to override, if you will want to do so in the future. There are certain places it's okay to use !important, but this is not the case...
Related
I'm using Bootstrap and trying to develop this website. Particularly using their bg-primary category, which sets the default color to a royal blue. However, I need the color to match a teal on the "subscribe" button. However, as you can see in the inspection, the color of the card background has a default setting of the blue with an important tag.
My CSS to change the bg-primary color can't override the natural color Bootstrap set because they placed the important tag on it (even my important won't override theirs).
.bg-primary {
background-color: #3292a6 !important;
}
How do I go in and irrevocably remove Bootstraps default !important tag to the .bg-primary class?
You will have to override a lot of things ( `:hover' and 'disabled' among others) I'll suggest creating a new css class:
buttonColor {
border: none;
background-color: black;
color: white;
padding: 10px 20px;
}
buttonColor:hover {
cursor: pointer;
background-color: white;
color: black;
}
Try:
.card.bg-primary {
background-color: #3292a6 !important;
}
Here's why:
With CSS (Cascading Style Sheets) there is a concept called "specificity." My above rule will work because it uses two classes (.card & .bg-primary) instead of just 1 class (.bg-primary).
In general, to override bootstrap classes, I make my css rules more specific by adding a class in front (Note: this won't magically work, especially with Bootstrap nav! You have to inspect the styles, see which bootstrap rules are applied and create an even more specific rule. This can be tedius, and there are probably better, but more complicated ways.)
There are two common approaches.
If you want to only override it in a few places, then Jesse Phillips's primacy solution is best, but if you want to globally over-ride it and you have direct access to how the header is parsed, then you simply need to make sure that your CSS rule is included later in the document than the Bootstrap
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/customStyle.css">
then all you have to do is add an !important tag to your rule that matches the class you want to override.
EDIT: A third option I sometimes see people recommend is to save the bootstrap.css locally to your server and remove the !important tag there, but this in not a good idea because you will loose this change if you ever try to update your bootstrap to a newer version.
You would simply have to over ride the class with your own bg-primary class adding the !important tag there as well.
See this SO - How to override !important?
This Mozilla post - -https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_to_override_!important
Two solutions that I don't see here yet:
Don't use Bootstrap. Learn how to write your own CSS.
Remove the class that is adding !important from the HTML element and re-write it in your own CSS files.
Fixing !important with more !important tags is not a way to write good CSS. Kill the source.
This might be a very stupid question, but I couldn't find anything and it seems so obvious: is nesting with CSS possible like with SASS?
For example, I want to define a h1 tag on a certain page, so I write:
body.certain_page h1 {
font-size: 12px;
}
So far so good. If I want this style to apply to more than one page, I would write:
body.certain_page h1, body.other_page h1 {
font-size: 12px;
}
Now when you define a lot of rules this way, it gets very tiring. It would be so much easier to write something like this:
body.certain_page, body.other_page {
h1 {
font-size: 12px;
}
}
Like a media-query. Why is that not possible? Or am I missing something?
No, that's not possible now, that's why SASS lists nesting as a feature.
Well, as #destroy already answered, you cannot have nested selectors using CSS, that's why developers choose LESS and SASS preprocessors. The best thing you can do to minimize the CSS is my grouping common properties like
div, p, i {
color: #f00;
/* All the three elements will have the same color */
}
You can also declare the base properties right in the parent selector so that they can be easily inherited and you don't have to call them again and again on each..
body {
font-size: 14px;
font-family: Arial;
color: #515151;
}
The above properties will be easily inherited by elements such as p, so you won't have to declare the font-family or font-size each time unless and until you want to have a different font-family for a particular element which can be over ridden by using a more specific selector like
.class_name p {
font-family: Open Sans, Arial;
}
You do have universal selectors which will also ease up over lengthy selectors, like say you want to color red all the elements nested inside a specific element having a class called .class_name so instead of doing
.class_name p, .class_name div, .class_name fieldset {
/* This is really bad */
}
Instead you can write the above as
.class_name * {
/* Much better */
}
Conclusion : Learn CSS Selectors, that's the only way you can figure
out and you can optimize your CSS yourself, while selectors totally
depend on the DOM, so there are no pre defined techniques but you
should keep the selectors simple, not over complicated, else you will
end up writing more and more specific rules which will lead to more
100 line of crappy CSS...
Also, here's an handy tool by Google you can always use to optimize the performance.
With CSS Selectors 4, something similar will be possible with :matches pseudo-class:
:matches(body.certain_page, body.other_page) h1 { ... }
It is already available in Webkit/Blink and Gecko-based browsers (as :-webkit-any() and :-moz-any(), respectively), but only as an experimental feature. Until CSS Selectors 4 are adopted by most browsers, using CSS Preprocessors seems to be the only solution to prevent such self-repeating in writing CSS.
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css
I'm trying to catch all the elements of my website in one css declaration. It's a Drupal websites with a billion p's, a's, li's, ul's, strong's, all kinds of div's,...
So, pretty easy I thought and I added this in my css:
body.i18n-zh-hans {
color: red;
}
But for some freakishly reason, the site doesn't move a muscle.
What's the proper declaration to catch ALL the text in just 1 CSS declaration?
Worst case scenario, I would have to declare everything on its own no? Like:
body.i18n-zh-hans, #main p strong a li ul {
color: red;
}
UPDATE
So, Basically, I just want to override all, in this example, the colors of the font in the whole website!
Thanks in advance
You'd want to make that declaration !important, so it'd override any more "specific" styles specified elsewhere in your CSS. Remember that CSS has precedence rules, and "more specific" matches will have higher priority than "less specific" ones.
body.i18n-zh-hans {
color: red !important;
}
* {
your style..
}
and you got to be the last rule in the list..
and there might be some inline styles, those will override..
tested it a bit out and figured out that everything you define in it needs !important..
Here you go:
If body is the biggest box in the box model. Get it? You want to target the big container. Try firebug. It's a great tool. You can even edit the css on the browser to instantly change the website (not permanent though).
body {
color: red !important;
}
This was the one and only solution!
.i18n-zh-hans * {
font-size: 99% !important;
}
Thanks to everyone who participated this discussion.
I need a simple <hr/> in a page that extends a default one (I'm using Django template framework); in this default page, a standard and untouchable stylesheet styles HR with border:none; height:1px but I would like to reset these styles to their default values.
I tried putting {border:1px inset; height:auto;} in my page but I didn't get the same aspect as having no style at all.
Is there a method to restore the default style for a tag?
In order to make your rule apply, you'll need to ensure that you give your rule a greater specificity than the existing rule in order to override it.
For example, if the rule is this:
hr {
/* rules */
}
Then you would need to do something like this:
html hr {
/* your rules */
}
Scores are calculated by these basic rules:
elements, like div are worth one point
classes, like .comment are worth 10 points
ids, like #user123 are worth 100 points
The total score for the selector is the sum of all of its parts, so div.class is worth 11 (10 for the .class and 1 for div
(It's actually a bit more complicated than this - see this article for details - but this explanation works as a general rule)
Edit:
I just saw your comment about not knowing the defaults.
According to Firebug, an hr appears to look like this:
hr {
height: 0;
width: 100%;
border: 1px solid #808080;
margin: 8px 0;
}
You can use the tools provided in other browsers to see if they use a different set of styles, then decide for yourself which ones would be the best ones to use.
Try YUI 2 Base CSS, seems to be doing what you want. Or even YUI 3 Base CSS
There is a possibility to "restore" default styles only for a certain context
Update
Just checked - Base CSS does not include styles for hr element
The default stylesheet for HTML documents, without any overrides, is defined by the W3C. You can find the full default stylesheet here: http://www.w3.org/TR/CSS2/sample.html
Alternatively, you could use Firebug in Firefox (or any similar tool) to view the styles of an <hr /> element on a test page without any styles applied.
Sure, you need to give your styles a bigger weight; add an id to your < hr/>, or do this in CSS:
html body hr { ... your styles ... }
No. You either have to not apply the styles in the first place, or override every broken style with explicit values.
You can also give your styles more weight with the !important property. If the original is like this:
.someClass { color: red }
You can override it with this:
.someClass { color: green !important}