How do I restrict style to affect content only in modal?


Tags: html,css

Problem :

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.



Solution :

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.


    CSS Howto..

    How to refactor an existing project to use Compass?

    CSS styling of a line: how to get the line to move with the header above it

    How to remove space between bannner and content in wordpress theme?

    How to create a responsive design with CSS only

    How to reference nested classes with css?

    How to make Wrapper div contain only non-overflowing divs

    How can I remove/cover up a section of a border?

    How to do custom text editing in CSS and getting a error in a school project

    CSS: How to accomplish a div which is blurred at the edges?

    how to make css contents like boxes, text as center?

    How can i remove all attributes from any css selector? To override and reset any css id selectors?

    How to add 2 jScrollPane to my page and each one has different CSS?

    How to change the text color of the clicked row of table with css and jquery

    How to embed video on my first website

    How to scale image block using only css?

    How to fill a transparent image with a progress bar ? #CSS #HTML #Jquery?

    How to escape quotes in Less variable which stores a color name?

    How do I create page transitions for my website

    How can I alter this CSS so that it only applies to a certain div?

    CSS Divs overlapping, how do I force one above the other?

    How many screen sizes should be handled typically for a responsive website? [closed]

    How to find all next siblings from a particular class using css selectors

    Outlines and Borders not showing at all in IE

    How to use CSS to make images in multiple li of one ul align by bottom edge?

    How to use CSS to replace or change text? [duplicate]

    How to create a clickable block?

    Bootstrap: how to clear images in a gallery?

    How to put the table inside the box

    How to separate header from content

    How to add styling to active input's previous sibling using CSS only [duplicate]