I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
Related
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
Is it possible to set a CSS pseudo-class on an HTML element? In this particular case, I would like a certain <div> to have the last-child property.
I asked myself this question when IE11 wouldn't recognize a specific <div> as a last-child while other browsers did. I have found a work around and at this point I just want to know whether setting a pseudo-class on an HTML element can be done.
A coworker suggested this may be in fact done using React framework. However, I have not been able to find anything suggesting this is possible.
No.
Pseudo-classes are used to define the state of an element.
Yes, you can.
This would also have to either be in a JS or CSS file, not an HTML file as far as I know.
For example, I was using :nth-child(4) on an img and can't see it being different with div.
This is how I was using it in my JS:
$('#recipeStack img:nth-child(4)').css({
'transform' : 'translate(160px, -160px)',
'transition-delay' : '0.3s',
'opacity' : '1'
});
And should turn out fine in your case in a CSS file too:
.parent > div:last-child {
background-color: red;
color: white;
}
I want to replace the main "hero" background I have on one of my pages. Since I am using Wordpress, I am forced to use custom CSS (I cannot edit HTML).
I have tried targeting the div where the current photo is contained using class selectors as shown below:
.header .custom-mobile-image {
background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg);
}
Here is the HTML code i am trying to target:
<div class="header custom-mobile-image" style="background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/education-books.jpg"); background-color: rgb(106, 115, 218); padding-top: 74.5938px;">
The link to the page itself: http://thenovelcolumn.com/the-10x-rule
The target photo is the first one on the page with three opened books in the center.
I expected my CSS code to change this photo to whatever the link specifies it to, but the photo remains unchanged.
Your selector should be .header.custom-mobile-image (i.e no space between the two classes - they both are assigned to the same element, the space would mean a parent / child relation)
And you should add !important in that rule to override the more specific style attribute.
That's because styles from "style" attribute have bigger specificity than any styles you might add with classes and even id's: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
So in this case only way is to use !important:
.header.custom-mobile-image {
background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg) !important;
}
here we go:
.header.custom-mobile-image {
background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-
Rule-Image-2-e1555476700855.jpg") !important;
}
Writing inline css (style="some:css;") is not the best idea. It will allways neglect styles from your .css file.
As someone already mentioned it's about specificity.
Weakest are type selectors (html tags and pseudo elements), then goes classes, then id's
if you have inline css, it will apply styles over .css file. Only thing stronger than inline css is using !important
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.
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