Set different stylesheet for div and all child nodes?
I am wondering if there is an option to force the div to ignore all CSS rules in the document and instead use a different stylesheet for itself and all its child nodes.
Small example:
<html>
<head>
<style>
div{color:red}
</style>
</head>
<body>
<div>This is red text</div>
<div stylesheet="/path/to/my/stylesheet.css">
This is text in a color defined in the other stylesheet
<div>This is also not red</div>
</div>
</body>
</html>
As you can see, I want to define the stylesheet directly on the div, not globally. Is there a way to do something like this?
What I want to achieve is more encapsulation of my code. I also know there are possibilities like pseudo-namespace, but this is ugly and still doesn't guarantee there are no conflicts ...
Update
In the meantime, I found the "scoped" attribute of the style elements which is very similar to what I was asking for. But it is almost not supported by the browser.
Are there any better solutions?
source to share
You cannot do this without an attribute <style scoped>
. And as you said, it is horribly unsupported. This is a cloud styling jQuery plugin on GitHub and is pushing support for more browsers. You can also @import other-stylesheet.css
in your scope style definition with this jQuery plugin.
All things considered, however, you might actually be better off using multiple classes for a single element. Give the div a couple of classes and you can organize your projects pretty decently. Something like <div class="parent child grandchildren-1">
would be selected with just this css:
.parent.child.grandchildren-1 { color:red; }
source to share