How do I restrict style to affect content only in modal?
Goal: With minimal changes (preferably none) to an existing style sheet, how can I contain it's effect to a modal so that it doesn't change the underlying page. For example
<html> <head> <link rel="stylesheet" href="/css/theme1.css"/> <head> <body> <div class="bodycontent> Some stuff </div> <div class="modal"> <link rel="stylesheet" href="/css/theme2.css"/> Modal Content </div> </body> </html>
Obviously, this will not work but hopefully it shows what I'm trying to achieve. In practice, this applys theme2.css to the whole page as opposed to just the modal. Is there a way for me to apply style to only the modal without having to go into theme2.css and put .modal before every rule?
Edit for clarity I'm essentially building a theme switcher with the preview in a modal and I don't like my base page getting affected. Also, suppose the themes I'm using are very long and I'm trying to avoid two large css files, one for the preview in the modal and one for when the theme is actually used on a page.
No, you have to write your CSS in such a way that
.modal only inherits appropriate styles from more general CSS selectors that apply to it (e.g. the
body CSS properties).
Any selector that needs to apply specifically to the modal and to the modal alone should be prefixed with
.modal and any styles it inherits that you do not want need to be overwritten in this manner (it may help to give the modal an ID which has higher specificity and will make it easier to overwrite said properties).
I understand you may find that inconvenient, but you should have designed your CSS this way in the first place. There is no way to 'cancel' CSS inheritance for a specific DOM node that I am aware of.
EDIT: If you populate the modal content with an iframe (which is supported by most decent modal window scripts) you can in fact do it the way you are asking - styles from the page will not interfere with styles inside of an iframe, and that way you can include the modal styles directly in the iframe (in the iframe
head or as an external
link) like you want.