How to stop affecting CSS of other content on our site?

Question

On my web page, I needed to receive an email and display the contents of the letter. it is fully successful just now, only one problem is that when the content of the email is loading on my page at this time, the CSS of this email affects my page and changes the colors of the link and so much more. I wrote the following code

<div class="ticket-reply-content"> <!-- division to print the messages --> ${replies.message_modify}<!--this will load content dynamically --> </div> 

Please give me some solution or tag.

Answer 1

try changing it like this: for example, if you have this code:

 .yourclass{ 

}

change it to a specific condition:

 .parent_element .yourclass { } 

or try to use! important

Answer 2

No , you cannot disable css for a specific div.

If your div selector matches then the rule will be applied until it is canceled by the rule (which sets the same property) down the cascade. You can use !important to override rules.

You can either change your div class or id to stop them from matching elements you don’t want, or you can override all your rules in this section.

Update

I believe that you should upload email content in an Iframe . This way css Mail will not affect other web page content.

Answer 3

do not use the regular class name in your code, for example, do not use the contents of the header footer, you can combine the entire class name with the name of your site to make sure that it does not have class confusion

Answer 4

You can use regular expression and localize each of the selectors in the built-in style tag only in the place where you would like to apply styles.

i.e. .someclass td should become .ticket-reply-content .someclass td if you want the styles to apply to the div you show.

You should be able to use the regex: /(.*{)/g to match any selector and opening bracket to declare it.

In Javascript, you will need to do this after you have already uploaded the element to the page:

 $(function() { // select each of the style elements $('.ticket-reply-content style').each(function(styleElement) { // get the css styles from the element var oldStyles = styleElement.html(); // prepend each selector with a class to localize it var newStyles = oldStyles.replace(/(.*{)/g, function(match, p1) { return '.ticket-reply-content ' + p1; }); // replace the css content styleElement.html(newStyles); }); }); 

You should find the style element inside replies.message_modify and use a similar approach from the java backend