I do not have access to the HTML file and we use a CDN for jQuery (so assume I don't have access to that as well).
How do I go about "deleting" a rule using my own custom CSS? I am attaching a picture with the CSS rule I want deleted.
This is how it looks:
This is how I want it to look:
If you just want the background-position to have no effect on the position of the image, use this:
.ui-icon-radio-off {
background-position: 0 0;
}
But if you want to reset it to what it was supposed to be set to if that default jquery css wasn't there, then you can unset it like this:
.ui-icon-radio-off {
background-position: initial;
}
N.B. You mgiht have to add an !important tag to the above properties if jquery renders the css property below the above property.
Some browsers accept the all CSS definition. What it does it resets or reverts all the CSS definition for all elements matching the CSS selector.
.my-class {
all: none;
}
Here is an good example from https://stackoverflow.com/a/31317986/3856582
#someselector {
all: initial;
* {
all: unset;
}
}
Or use the CSS initial keyword on any CSS definition.
Related
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.
I am trying to override the following found in the bootstrap class of "modal-footer"
margin-top: 15px;
I have the following HTML code that does this:
<div class="modal-footer my-modal-footer-override"></div>
and the following custom css :
.my-modal-footer-override {
margin-top: 0px
}
But this does not work.
Any suggestions ?
You could try a more specific selector. This could do the trick
.modal-footer.my-modal-footer-override {
margin-top: 0px;
}
Multiple class selectors should work in everything newer than IE6. Please note the absence of whitespace between the classes: this means that both classes are applied on the same element.
If this still does not cut it, you could put .modal before this selector, so: .modal .modal-footer.my-modal-footer-override.
The important! declaration could be used as a dirty hack, but I would advise against it.
Check your CSS import order. Make sure your custom css is loaded after Bootstrap. Use firebug or chrome dev tools to see if your styling is being overriden because of something imported laterin the html.
Have you tried this?
.my-modal-footer-override {
margin-top: 0px !important;
}
Using !important before the ";" will give this rule more weight than the bootstrap css.
You can add that inside yout HTML using ..css.. in the head, or in a new css document.
How can I turn all text on a page to a specific color?
Content (HTML and CSS) is user generated, so I cannot control classes for specific elements.
Since the page's html, classes, etc can vary tremendously (user generated), I can't write CSS that will target elements individually.
Originally, I had tried to use !important on the body like below, but forgot that any targeted CSS would override it.
body {
color: white !important;
}
Is my only option to use javascript to apply an inline style to every element?
Use * selector, not only body.
* {color: #fff !important}
You can use Universal selector (i.e *) selector to select any element on page:
html * {
color: white !important;
}
OR You can use directly use like this:
* {
color: white !important;
}
From the statement user generated, we can see that users will be able to add some inline styles, even !important ones. Then, your only solution is javascript (jquery example):
$("*").css("color", "#FFF");
Or filter the html to remove the styles with HTMLPurifier, which you should be using to filter the javascript anyway (to avoid MANY kind of attacks on your web.
OLD ANSWER:
Use this within your html's head (not in the stylesheet) because it has preference over the styles in separated files:
<style>
* {
color: #FFF!important;
}
</style>
i have some code for example here in html
<html>
<body>
<img src='an image source'/>
<h1>Hi it's test</h1>
<div id='mydiv'>
<img src='an image source'/>
<h1>Hi it's test</h1>
</div>
</body>
</html>
if i used the following css code for styling it:
img{
width:100px;
height:100px;
}
h1{
font-size:26px;
color:red;
}
the question is : How can i prevent and isolate the tags inside the mydiv div tag from styling by the public tags style ?
CSS Cascading and Inheritance Level 3 introduces the all shorthand property and the unset keyword, which, together, allow you to achieve this conveniently.
For example, if an author specifies all: initial on an element it will
block all inheritance and reset all properties, as if no rules
appeared in the author, user, or user-agent levels of the cascade.
This can be useful for the root element of a "widget" included in a
page, which does not wish to inherit the styles of the outer page.
Note, however, that any "default" style applied to that element (such
as, e.g. display: block from the UA style sheet on block elements such
as <div>) will also be blown away.
You’ll need to apply all: initial to your div and all: unset to its descendants:
#mydiv {
all: initial; /* blocking inheritance for all properties */
}
#mydiv * {
all: unset; /* allowing inheritance within #mydiv */
}
You may want to use a class on your div instead of an id, so that any rules you write to style its descendants won’t have to match or beat the high specificity used in this rule.
To be really safe, you may want to block styles on potential pseudo-element descendants too:
#mydiv::before,
#mydiv::after,
#mydiv *::before,
#mydiv *::after {
all: unset;
}
Alternatively, for broader browser support, you can manually attempt to do what all does by setting all known CSS properties (don’t forget the prefixed versions):
#mydiv {
/*
* using initial for all properties
* to totally block inheritance
*/
align-content: initial;
align-items: initial;
align-self: initial;
alignment-baseline: initial;
animation: initial;
backface-visibility: initial;
background: initial;
...
}
#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
/*
* using inherit for normally heritable properties,
* and initial for the others, as unset does
*/
align-content: initial;
align-items: initial;
align-self: initial;
...
color: inherit;
...
}
You can encourage browser support for the all shorthand property and track its adoption with these issue links:
☑ Chrome 37+
☑ Firefox 27+
☑ Webkit (Safari 9.1+)
☐ Internet Explorer
☑ Edge 79+
☑ Opera 24+
Up-to-date browser support information for the all shorthand property is available here.
Old question, but things have changed a little bit since the accepted answer. There is now a CSSWG-recommended keyword called revert which would be better suited than initial and unset to solve this problem, as it resets properties to what they're defined to in the user agent stylesheet, rather than to their initial value (which has no regard for which element they're used on). So for instance, with revert, a div inside #mydiv will have its display set to block as we would expect and not inline (the initial value of display).
You'd have to do this:
#mydiv,
#mydiv::before,
#mydiv::after,
#mydiv *
#mydiv *::before,
#mydiv *::after {
all: revert;
}
At the time of writing, revert is supported in Edge, Firefox, Chrome, and Safari, but not IE or Opera.
There is also something else to take into consideration regarding the accepted answer. If you want to style anything inside #mydiv, you need to do so with a selector that is at least as specific as the one you used to unset or revert everything, otherwise it will be overridden by that rule, even if it comes after it in the CSS.
So you'd need to do something like this (note the #mydiv which boost the specificity of the rules):
#mydiv p {
margin-top: 20px;
}
#mydiv .bg-black {
background-color: black;
}
// etc.
You cannot technically, that's how CSS is suppose to work. If there is any style defined for
div tag in your style sheet it will be applied to all div elements.
Few things that you can try is don't style with tag name instead give class name and give style declaration to class. so that you can make sure where all styles will go.
OR. if you want some specific Div tag to not have the style while other Divs to have. you can always reset it give some different class name or id and reset the style declarations
iframe is also a decent solution for isolation of styles if it doesn't complicate other business logic. Plus this can be done in pure JavaScript and may work in older browsers too.
const HTMLToIsolate = `...` // get your div tag as HTML string
const parentContainerRef = document.body; // or something else
const newIframe = document.createElement('iframe');
// set height & width to 100% and remove borders for newIframe
parentContainerRef.appendChild(newIframe)
newIframe.contentWindow.document.open('text/html', 'replace');
newIframe.contentWindow.document.write(HTMLToIsolate);
newIframe.contentWindow.document.close();
// bonus to remove scroll bars by setting proper iframe's height
newIframe.addEventListener('load', function onIFrameLoad(e) {
const iframeBody = this.contentDocument.querySelector("body");
this.style.height = `${iframeBody.scrollHeight}px`;
});
This worked perfectly for me when I had to embed a complex HTML file into my webpage fetched remotely without MixedContent warning and without parent HTML styles overriding the embedded HTML. Thanks to https://benfrain.com/sandbox-local-htmlcss-code-snippets-inside-iframe-style-guidespattern-libraries/ for this excellent idea!
Though #mydiv * { all: unset } CSS trick, as suggested in the accepted solution here works, it ended being a complex browser operation as there were many DOM nodes on my page.
One thing that might be helpful is the CSS direct child selector, which is available in all browsers including IE7+. That lets you apply styling that doesn't cascade down into children. For example in your code you could use this CSS:
body > img {
width:100px;
height:100px;
}
body > h1 {
font-size:26px;
color:red;
}
And that CSS would only apply to elements directly on the BODY element.
I wonder if there are any possibility to reset css in middle of page? I have main style, but in one area I would like to use style from tinyMCE generated source.
So in tinyMCE source are elements which in editor looks like default browsers style (or like user wants), but in other pages uses style from my main css and from it self inline style. So I get mix of both ant it looks crappy. And I have no idea how to reset main style,.. without iframes.
Thanks
You mean, have a set of CSS rules to apply to the top part of a page, and a reset set of rules apply to the rest? No way, can't be done, sorry.
My approach to stuff like this is usually to embed the problematic content in a wrapper <div class='wysiwyg_html'> and then to set specific styling instructions for that content:
.wysiwyg_html p { display: inline }
.wysiwyg_html a { text-decoration: underline }
.... and so on
If you want, you can apply a whole reset stylesheet to everything inside wysiwyg_html that way.
thats pretty easy, i will show this with the "poorman's" reset but the others (eric mayer's ect.) works the same way:
* {
padding: 0;
margin: 0;
}
div {
padding: 50px;
}
#content *{
padding: 0;
margin: 0;
}
now your div inside the #content should have the reseted padding: 0; again, because an id selector wins over an element selector, so the only thing you need to make sure is that your secound reset has a selector that outweighs the others (but dont use important!).