Today I am facing a problem of restricting the scope of css. The
<div class="parent">
<div id="childWithNoCss">
<p>No css</p>
</div>
<div id="childWithCss">
<p>Apply css</p>
</div>
</div>
My css is:
div{
color:red}
p{color:blue}
I need to apply the css specific to the id childWithCss.
The css is fixed (I cannot change it) just need to limit its scope only to a specific element.
I cannot use scope attribute since it is incompatible in some browsers.
Is there any other solution?
Regards
Are you trying to find a workaround for this?
<style scoped>
p {
//some style
}
<style>
If so, there are some jQuery plugins that do the same thing and work for IE, at least for IE 9 and above. Here's one example:
jQuery scoped CSS plugin
If that's not what you're trying to do, can you not just add some nested css? Does this help at all with what you are trying to do?
Load an external CSS for a specific DIV
You can reset the CSS of an element with the css code: all:initial.
You could use some javascript to do this at runtime for the elements you want to reset. I see you tagged your question with angularJS, so jquery should be available.
jquery solution to reset all css for the p in the divs WITHOUT #childWithCss within .parent:
$('.parent div:not(#childWithCss) p').css('all','initial')
http://jsfiddle.net/2yXsL/3/
You should be able to do it with a bit of jquery
if ($('.parent').has('#childWithCss')) {
$('#childWithCss').find('p').css('color', 'red')
}
Reset the color of everything except #childWithCSS to the default text color with a bit of jQuery.
$("p:not(#childWithCSS p)").css("color", "initial");
Related
My usual setup for each view is an outer DIV that I style as the base background etc.
<div class="outer">
<!-- Actual stuff in here -->
</div>
Then, in the SASS, I refer to it like so.
div.outer { ... }
That adds one lever of indent and seems like an unnecessary (though minor) increment in complexity. So I wonder if it's possible to add a style to the template itself. Partly, to lower the complexity. Partly, because I'm going to have text-only elements with no tags at all.
Is it possible to set the style of template from SASS files if there are no tags, only text in it?
You can apply styling to the component host element with the :host selector:
:host {
color: red;
}
See this stackblitz for a demo.
I don't think it is possible, but I will ask anyway:
Can I apply an external css file (Bootstrap for instance) to a div and its children without affecting the rest of the page.
For example, I need to migrate a footer written with Bootstrap over to an existing page. That page does not use bootstrap. If I link Bootstraps css at the top of the page, the css is applied to the whole page which ruins existing css. How can I just apply the bootstrap styles to the footer section without having to rewrite most of the page's css?
Any suggestions?
I ended up using LESS to compile a new css of bootstrap with a prefix of .bootstrap as seen below. It works, but i wonder if there is a more traditional way of handling this problem.
file: bootstrap-only.less
.bootstrap {
#import 'bootstrap.css'
}
file: bootstrap-only.css
.bootstrap .container {
width: 100%;
}
file: page.html
<style>
.container { width: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="bootstrap-only.css">
<div class="not-bootstrap">
<div class="container">I am 20px</div>
</div>
<div class="bootstrap">
<div class="container">I am 100%</div>
</div>
You can try usig scooped css.Please do refer the following sample code.
<div>
<style scoped>
#import "filename.css";
</style>
//your div with its children will come here
</div>
Your inline styles should not be affected by adding Bootstrap as inline styles take precedence over styles from external resources. The only elements that should be affected are the ones in the page that share class names with bootstrap classes.
You can try referencing the Bootstrap css before your own css and your stylesheet will take precedence over the Bootstrap css. Unfortunately this may add styles additional styles to some of your classes which that you didn't explicitly reference in your stylesheet and may still change the look of your page.
For those classes that exist in both bootstrap and your stylesheet it's probably best to just change the names of those classes in your stylesheet and page. A quick way to do this is to use "replace" search for the class name and replace it with the new class name most IDEs have a way to "replace all" so it's often just a bit of typing and a few clicks to change a bunch of styles.
You can try using the Angular 2+, where you can simply create an component and us it anywhere irrespective of the page css. Basically it will create a shadow DOM and will not be accessible outside that component.
I want to add a Style to a link button element in JQuery. Following is my code which is not working. How can I achieve this? Any suggestions?
Here is the HTML
<div data-role="content">
EXIT
</div>
Here is the CSS.
.linkBUTTONS{
color: #1dace3;
}
Any help is much appreciated, as I am pretty new to HTML/CSS and JQuery Mobile.
UPDATE
When I put it like this, style as an attribute of the given link, it works.
EXIT
But when I put it in a separate StyleSheet it doesn't work.
Check for the precedence. There maybe other rules that override your style. You can check all this in developers mode. Also you can try writing rules with !important. Did you try changing class name to link-buttons or something other? Example
.link-buttons {
color: red!important;
}
I have a site I am adding some functionality to. The site is a bit outdated but I am not being paid to overhaul the entire site, just a few pages. Because of this I am using more modern code on these pages but there is still old code on these pages. Because of the old code (which will stay and not be removed) I have some CSS that conflicts.
Is it possible to make an entire stylesheet only apply to styles within a div.
Example:
<div class="style-sheet-modern">
<!-- My Stylesheet applies only within this div -->
</div>
My first thought was to just rename my css to fall within the div. Example:
.style-sheet-modern .conflicting-class{ /* styles */ }
However, this isn't desirable because there are a few hundred lines of CSS and I don't want to go through and rename all of my CSS. Also makes it difficult to update in the future.
Is there a way to apply an entire stylesheet within a certain div and not anywhere else on the page?
Sure, in most modern browsers. Put a scoped stylesheet WITHIN the div.
<div class="style-sheet-modern">
<style scoped>
.conflicting-class { ... }
</style>
</div>
You can use #import to use external styles. Note, for browsers that don't support it, it will apply the style to the entire page. So you probably just want to add an id to the div you want and style with that, for compatibility.
Why not give the <div> an ID?
Then you could use specificity to override just the classes/ids that are in that div?
IE:
<div id="style-sheet-modern">
<div class="my-class"></div>
<div class="etc"></div>
</div>
You could then target all styles inside the "modern" div like this:
#style-sheet-modern .my-class{
color:black;
}
#style-sheet-modern .etc {}
There would be no browser support issues.
If you're using something like less or sass – you could even have it in a separate file named "style-sheet-modern.less" or whatever you want it named and #import it at the bottom of your main styles file. This include would need to come last in the file so that it will override the other styles that could be applied to those same styles.
You could use a wildcard to reset all the styles inside the #style-sheet-modern as well if necessary like this:
#style-sheet-modern * {
reset: stuff; //obviously not the actual css
}
That reset for those styles would be the first thing in your 'style-sheet-modern.*ss' file.
And as I mentioned before, no browser support issues.
I just started to port twitter's bootstrap to GWT (see the github project here and a very ugly demo here), but, I was having a log of issues with bootstrap styles vs Gwt styles.
Bootstrap put a border-top in tr/td elements, and GWT components basically use tables everywhere. In the demo you can see that bug in the left VerticalPanel.
So, I was looking for a way to make GWT components ignore bootstrap styles, and I have no idea how to do this.
Is there a simple way to make it work right?
Thanks in advance.
It's possible, but somewhat complex to do something with a Linker in GWT. The high-level idea would be:
Put all your GWT components in a <div id="gwt">...</div>
Add a linker to the GWT Module file that will process CSS files.
In the linker, transform the GWT CSS (e.g., standard.css) to insert a #gwt before each selector rule.
The first part is easy, just add an id to your root element.
The second part is also easy, simply add code that looks like this to your Module.gwt.xml file:
<define-linker name="cssLinker" class="com.you.bootstrap.linker.CssRenamingLinker" />
<add-linker name="cssLinker"/>
The hard part is implementing the Linker. It's possible to do parse it by hand, but you might find it easier to use something like SAC.
Using the Linker, you can transform your CSS by inserting a #gwt before each selector. Using SAC, you might do that by overriding all the DocumentHandler methods to simply emit each of their arguments to an OutputStream. In DocumentHandler.startSelector() you would first emit "#gwt " before each selector.
[Edit]
This assumes that GWT's standard.css defines styles that override the bootstrap styles. If not, you might have to 'enhance' the GWT CSS with defaults. There's a list of W3C recommended defaults here.
The benefit is that this is future-resistant - if GWT styles change or if bootstrap styles change, this should be robust.
Hope that helps,
Adam
You can simply add a style to one of your root GWT objects and then simply override the bootstrap styles to remove those messy borders:
<div class="gwt">
... some other GWT-content
</div>
and in your CSS:
.gwt tr, .gwt td {
border-top: 0px;
}
Of course if you need to embed some bootstrap elements in your GWT elements then you will have to hack around and do:
<div class="gwt">
... some other GWT-content
<div class="bootstrap">...
... Bootstrap elements
</div>
</div>
and in your CSS:
.bootstrap tr, .bootstrap td {
border-top: 1px; // Whatever bootstrap style puts
}