Apply style sheet to only a specific element trait
Question
After doing a bit of googling I was unable to come up with an answer, so here's my question. Is there a way to specify a specific element trait, such as an id, inwhich an entire style sheet should be applied?
For example if I have a block of html like this
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div id="my_id">
<!-- A bunch of elements here -->
</div>
</body>
</html>
Is there a way to specify that the rules contained in ./style.css should only be applied to matching elements with in #my_id , similar to specifying #my_id before each rule in the style sheet.
I understand specifying #my_id before each rule will achieve this, but am wondering if there is a way to do it without the need to add bloat to the style sheet.
I'm working on a greasemonkey(userscript) script, which creates a 'container' element on a specific page in which it creates and places all other GUI elements required. I don't want my CSS interfering with the CSS on the page(such as accidentally over writing rules that already exist on the page), but don't want to add unnecessary bloat to my style sheet if it can be avoided since all rules are only to be applied to the 'wrapper' element and/or it's children.
3 answers
solution1
3 2012-12-05 08:21:21
To my knowledge this is not possible. As you stated you can prefix the rules with the ID, but this is not what you wanted to do.
I should say however, that you shouldn't have to specify a stylesheet for a single ID, because an ID is supposed to be unique in the context of the page. Furthermore, I find it bad practice to apply the same ID to elements which serve different purposes on different pages, because it can make writing common JavaScript pages quite confusing.
solution2
1 2012-12-05 08:27:01
And this is one of the reasons people started to use SASS . In SASS this would be as easy as just nesting all the css classes within the id class like so:
#my_id {
// all styles without editing
// Now all these styles are applied only if they fall
// under the element with id "my_id".
}
EDIT : The other (ugly) option is to use an iframe instead of a div and load your child elements and stylesheet within it so that it is sandboxed as follows.
<html>
<head></head>
<body>
<iframe id="my_id">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<!-- A bunch of elements here -->
</body>
</html>
</iframe>
</body>
</html>
PS: Don't forget to add the doctype. I have not added it in the example for simplicity.
solution3
0 2012-12-05 08:21:07
you can apply style to elements within #my_id using the > selector. example:
#my_id {
/* some style for #my_id */
}
#my_id > p {
/* this will style all p tags within #my_id */
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.