For practice and training CSS im trying to do something like:
In other words, I'm trying something like this: when I hover over third paragraph, second paragraph needs to get color like on picture.
I'm trying with pseudo-classes :hover and :before (or :after) with content attribute set to "", setting background to #E7A51B and opacity to 0.3 but It doesn't work.
HTML need to be like this:
<body>
<div class="app">
<p> First paragraph </p>
<div class="active">
<p> Second paragraph </p>
</div>
<br>
<div>
<p> Third paragraph </p>
</div>
</div>
</body>
EDIT: Thanks everyone on comments. Reading your comments I get idea to ask that is it possible some more generic approach, something like:
If I hover over element with class="foo1" background of element with class="foo2" get changed?
current CSS (Selectors Level 3)
With the current CSS standard, unfortunately what you are trying is not possible. However, what is possible at the moment?
Given the following markup:
<div class="app">
<p> First paragraph </p>
<p> Second paragraph </p>
<p> Third paragraph </p>
</div>
You can target elements that are on the same level (same parent) and follow your initial element you interact with (e.g. :hover). → Demo
/* targeting the direct descending sibling of the 3rd paragraph*/
p:nth-of-type(3):hover + p{
color:red;
}
/* targets the 4th paragraph when hovering the second */
p:nth-of-type(2):hover ~ p:nth-of-type(4){
color:blue;
}
/* targets all paragraphs being siblings of the first paragraph */
p:first-of-type:hover ~ p{
color:green;
}
the future (Selectors Level 4)
Selectors Level 4 will (most likely) bring two exciting new feature which can achieve, what you actually try to do:
1) The - what I would call it - subject indicator - it let's you determine, which element of the compound selector you want to target.
!OL > LI:only-child
would target all ordered lists with only have one list element (looks simple, but is not possible with current css).
2) the reference combinator:
label:hover /for/ input
would target an input element, when the label which is referencing it via it's for attribute is hovered.
At the moment this is not supported by any browser yet, but you see, we can be excited what awaits us in the near future of css;)
The :hover method in CSS will only work if you want to hover over an element and change the color of that specific element, it will not work to change a separate one. In other words, you will need to do some simple JQuery. If you're not familiar with JQuery, don't worry, I'll walk you through the steps you'll need. If you're familiar with Jquery and already have the library, skip to step 3 and I'll provide you with the exact code that will make it work. This looks extremely long and painful but that's just because I'm trying to be as thorough as possible. It is actually very simple
Step 1: If you don't know what JQuery is, it is JavaScript that has been rewritten in an easier (in my opinion) syntax. In order for the JQuery to work however, you will need to download the library (syntax) for free at jquery.com. When you get to the website, click the download tab and then download the compressed, production version of JQuery. When you click that to download it, a page opens up with all the code. Copy it all and paste it into your text editor and save it with a .js extension. ex: jquery-library.js.
Tip: make sure it is in the same folder as all of your other html and css documents that you're using.
Step 2: Link your html with the Jquery library you downloaded like this:
<head>
<script type="text/javascript" src="the name of your jquery library file.js"></script>
</head>
Step 3: Create a new file in your text editor with a .js extension. ex: background-color.js. You will also need to link this with your html page. Go to your html page and in the < head > section right underneath the first < script > tag, type:
<script type="text/javascript" src="the name of your javascript file.js"></script>
Your < head > section in the html should now look like this:
<script src="the name of your jquery library file.js"></script>
<script src="the name of your javascript file.js"></script>
Step 4: You will need to make a few simple changes to your html first. The second and third < p > elements both need classes so that the JQuery can identify them:
<div class="app">
<p> First paragraph </p>
<div class="active">
<p class="second"> Second paragraph </p>
</div>
<br>
<div>
<p class="third"> Third paragraph </p>
</div>
Step 5: Now for the JQuery. It is okay if you don't understand the syntax, just copy and paste this into your .js document:
Tip: I added comments to explain each string as much as possible. Anything on a line after a // is a comment.
$(document).ready(function(){ // <-- this string tells the browser to perform the following action once the page has fully loaded
$(".third").mouseenter(function(){
$(".second").css("background-color", "#9CF"); // change this css color to whatever background color you want
}); // when the mouse enters the class "third", the background color of the class "second"
// changes to #9CF
$(".third").mouseleave(function(){
$(".second").css("background-color", "#FFF"); //change this css color to whatever your default background is
}); // when the mouse leaves the class "third", the background color of the class "second"
// changes back to default
});
I hope this helped. Let me know if something doesn't work, but I tested it in safari and firefox and it is extremely basic JQuery so it should work anywhere. Keep in mind that on a mobile device, you can't hover, so try not to make it an essential part of your website.
Here is my solution
My goal was to create a solution that wouldn't require any work on the HTML of the page. I was also trying to create a solution that would be applicable in various scenarios. To do this, I have to use the .prev() method.
$("div p").on("mouseenter", function () {
$(this).prev().css("background-color", "red");
});
$("div p").on("mouseleave", function () {
$(this).prev().css("background-color", "inherit");
});
here is my new code with some jquery
in your html I added class last
http://jsfiddle.net/K4RFX/1/
$('.last').mouseover(function() {
$('.active p').css('background','#f00');
});
$('.last').mouseout(function() {
$('.active p').css('background','none');
});
<body>
<div class="app">
<p> First paragraf </p>
<div class="active">
<p> Second paragraf </p>
</div>
<br>
<div class="last">
<p> Third paragraf </p>
</div>
</div>
</body>
Unfortunately, the modern CSS doesn't have a selector like 'previous element'. We can only use some combinations of hover effects on parent and children elements, like in this demo:
CSS
.wrapper:hover p:first-child {
background: red;
}
.wrapper p:first-child:hover {
background: none;
}
HTML
<div class="wrapper">
<p>The 2nd parapraph</p>
<p>The 3rd parapraph</p>
</div>
Related
Is there a css selector for "no fragment identifier present"? The opposite of :target.
The thing is, I'm making a document where different parts of it are visible depending on which fragment identifier you give it. Think of it as a sprite file, only for HTML.
So it looks like this
<style>
section {display:none}
section:target {display:block}
</style>
<body>
<section id="one">The first block (showing with #one)</section>
<section id="two">The second block (showing with #two)</section>
<section id="three">The third block (showing with #three)</section>
</body>
And the user sees the first section if it's displayed with document.html#one on the location bar, etc.
The idea is that the browser will cache the html page (since it is just static html) and no other content needs to be loaded when displaying another block of text, thus minimising server load.
But the file looks stupidly empty when you call it up without a fragment identifier, so I wonder if there's a way to make all of it visible in that case, without any hidden sections. CSS only, no JS or server side processing; otherwise it wouldn't be static HTML!
Edit:
Unlike the proposed duplicates, I would like to "simply" show the whole document when there's no fragment identifier, not just one element in particular.
In other words, the default (in the absence of any #) should be to show everything; only if there is an # should everything but the target be hidden.
The duplicates don't address this situation at all.
With some extra markup and more verbose and specific CSS to write, to avoid javaScript. Needs to be updated each time HTML structure is updated .
:target ~section {
display:none;
}
#one:target ~.one,
#two:target ~.two,
#three:target ~.three {
display:block;
}
<nav>
One
Two
Three
None of below targets
</nav>
<!-- html anchor to allow use of :target ~ selectors -->
<a id="one"></a>
<a id="two"></a>
<a id="three"></a>
<!-- end anchor -->
<section class="one">The first block (showing with #one)</section>
<section class="two">The second block (showing with #two)</section>
<section class="three">The third block (showing with #three)</section>
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>
Is it possible to wrap an <a> tag around <div>s like so:
<a href=etc etc>
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
</a>
Eclipse is telling me the div's are in the wrong place?
If this is not allowed. How can I make the entire 'layout' class become a link?
That structure would be valid in HTML5 since in HTML5 anchors can wrap almost any element except for other anchors and form controls. Most browsers nowadays have support for this and will parse the code in the question as valid HTML. The answer below was written in 2011, and may be useful if you're supporting legacy browsers (*cough* Internet Explorer *cough*).
Older browsers without HTML5 parsers (like, say, Firefox 3.6) will still get confused over that, and possibly mess up the DOM structure.
Three options for HTML4 - use all inline elements:
<a href=etc etc>
<span class="layout">
<span class="title">
Video Type
<span class="description">Video description</span>
</span>
</span>
</a>
Then style with display: block
Use JavaScript and :hover:
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
And (assuming jQuery)
$('.layout').click(function(){
// Do something
}):
And
.layout:hover {
// Hover effect
}
Or lastly use absolute positioning to place an a anchor with CSS to cover the whole of .layout
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
<a class="more_link" href="somewhere">More information</a>
</div>
And CSS:
.layout {
position: relative;
}
.layout .more_link {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-indent: -9999px;
z-index: 1000;
}
This won't work with older versions of IE, of course.
While the <a> tag is not allowed to contain <div> element, it is allowed to contain other inline elements such as <span>.
When I encountered the problem i swapped the div tag with a <span>. Since the span tag is an inline element, you need to apply a display:block to the css of your <span> element, in order to make it behave like the <div> block element.
This should be valid xhtml and does not require any javascript.
Here's an example:
<a href="#">
<span style="display:block">
Some content. Maybe some other span elements, or images.
</span>
</a>
Another simple solution - just add an onclick event handler to the div thusly:
<div class="layout" onclick="location.href='somewhere'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
This works great for me but there is one small gotcha. I'm not sure how search engine friendly this is. I fear that google's web crawlers might not find this link so I also tend to include a traditional A HREF link somewhere in the block like this:
<div class="layout" onclick="location.href='destination_url'">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
This is a link
</div>
Timothy's solution is correct ... instead of wrapping an anchor around a div ... you simply give layout to the anchor element with display:block and add the size and width of the anchor ...
.div_class { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }
<div class='div_class'></div>
HTML provides two general elements, where div is a natural block element, and span is a natural inline element. All other elements are similarly assigned to be a natural block or inline.
Now, while both can be made by css display to be any of inline, inline-block or block, they are still treated for enclosure purposes as their natural selves, hence the warning messages. Leopards and spots sort of thing.
However, css is only meant to be for making what an element looks like (presentation), but not actually be like (functionality), so it doesn't change an element's basic nature, though that gets very fuzzy in practice. A span made block becomes a bully that kicks everything else off the line, which is very un-inline sort of behaviour.
So, to mitigate against possible conflicts between their natural and css-induced behaviours, it is better to allow:
div or any natural block tag to only ever be block or inline-block.
span or any natural inline tag to only ever be inline or inline-block.
This will also mitigate against tending to build page structures that will likely end up churning out error and warning messages.
Basically, NEVER embed a natural block tag inside a natural inline tag, at any depth.
Why there is a really a distinction is perhaps due to a simplistic idea of what HTML was going to be used for when it was first dreamed up.
Certainly, framework makers got around a lot of these what-to-embed-where problems by just using myriads of divs everywhere, and 'divitis' was born, and still alive and well in every framework. Just have to press F12 in a browser on almost any commercial web page and drill down through a dozen divs. This very page has 15 unbroken levels of divs.
It is not hard to see why just settling on divs made sense. For example, a p tag may have a bunch of links to various sites, and that is ok because inline links are allowed in a block p. However, if not wanting to have query variables visible in those urls, then buttons are required. If only one, then the p can be put inside a form, as a p cannot contain a form.
The formaction attribute on a button can be used to target a url other than the form default, but it still does not allow independent forms, each with their own set of hidden inputs. A button can use the form attribute to use it with a form that isn't an ancestor, but it can get messy to keep track of.
For multiple links to different sites to appear as part of one paragraph though, the only way is to use a div instead of the p and then wrap each button in its own form set to inline. Most frameworks have to cope with so much more complex scenarios that nested divs are the only way to go.
It meant that they really only had to manage one tag per purpose and manage it as if it was an isolated environment. So what was meant to be an occasionally-used functional grouping tag became the web's Lego block. And none of them are going to risk breaking their frameworks by converting to HTML5 semantic tags in a hurry. In the end, semantic tags only really work for fairly static content rather than rich interactive sites.
I had tried to create custom solution using jQuery, which would imitate same behavior as a tag does, for parent DIV.
DEMO:
https://jsfiddle.net/kutec/m9vxhcke/
As per W3C standard, you cannot do this:
<div class="boxes">
<a href="http://link1.com" target="_blank">
<div class="box">
<h3>Link with _blank attr</h3>
</div>
</a>
</div>
You must follow this:
<div class="boxes">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
But by following above code, you wouldn't get the whole DIV clickable :).
Correct structure should be something like this, which also allows you to click over the DIV to redirect on the given href value:
<div class="boxes" data-href="http://link1.com" data-target="_blank">
<div class="box">
<h3>
Link with _blank attr
</h3>
</div>
</div>
Simple Solution:
$(function() {
$('.boxes a').each(function(){
var aTag = $(this).attr('href');
$(this).parent().attr('data-href',aTag);
$("[data-href]").click(function() {
window.location.href = $(this).attr("data-href");
return false;
});
})
}(jQuery));
Dynamic Solution:
(function ( $ ) {
$.fn.dataURL = function() {
// variables
var el = $(this);
var aTag = el.find('a');
var aHref;
var aTarget;
// get & set attributes
aTag.each(function() {
var aHref = $(this).attr('href');
$(this).parent().attr('data-href',this);
aTarget = $(this).attr('target');
$(this).parent().attr('data-target',aTarget);
});
// imitation - default attributes' behavior on "data-" attributes
$(el).delegate('[data-href]','click', function() {
var loc = window.location.href;
loc = $(this).attr("data-href");
aTarget = $(this).attr('data-target');
if(aTarget == "_blank"){
window.open(loc);
} else {
window.location = loc;
}
return false;
});
//removing attributes from selector itself
el.removeAttr('data-href');
el.removeAttr('data-target');
// css
$('[data-href]').css('cursor','pointer');
};
}( jQuery ));
Final call:
<script>
$('.boxes').dataURL();
</script>
Hope this would be helpful :)
You would just want to style the "a" tag as display: block;
Eclipse is appropriately telling you that your HTML is not to spec (as a div tag is not allowed in an anchor tag).
But, since you seem to want to be visually making the anchor look like a big-ol-box, then simply style it as such :)
One easy way to make the div a link/clickable is by using html javascript onclick attribute:
<div class="clickable-div" onclick="location.href='#';"><div> ... </div></div>
I have a div that is encased in an html <a> tag, so clicking anywhere on that box will lead the user to a new location.
I would like to add one button inside that box that leads somewhere else (a more specific location than the encasing div's link.
At the moment, adding that second <a> tag inside my div closes the original <a>, which makes sense as I guess these tags cannot be nested. How can I accomplish this 'nested' link problem?
Update
I need to build a rel attribute because it toggles an expanding section in the outer div.
My current code:
<a class="toggle" rel="toggle[<%= "#{user.id}" -%>]">
<div>
<a>...</a>
</div>
</a>
<div class="expand_me" id=<%= "{user.id}" -%>>
...
</div>
I've been trying to get the javascript you have suggested to work, but it doesn't. How should I get this specific case to work? I apologize for not including this information at the outset - I didn't know there would be a real difference between getting the solution to work with an href instead of the needed rel.
you could instead add an onClick handler to the div, and could place the link safely inside the div.
<html>
<head>
<script>
function clicked(){
window.location.href="link2";
}
</script>
<style>
body{
width:50%;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<div width="100px" height="100px" style="background-color:red" onclick="javascript:clicked()">
test
</div>
</html>
Not only <A> elements cannot be nested, but (I believe) that the content must be inline, so DIV should not be used for links. I'd use, onclick in the outside DIV, for example:
<div id="myparentdiv" onclick="alert('go somewhere')">
hi bla bla blah
<br> hi <br>
<a onclick="document.getElementById('myparentdiv').onclick=undefined;return true;"
href="http://stackoverflow.com/">go to st</a>
</div>
Obviously, you should replace the alert call with your redirection.
The inside onclick is to avoid the event propagation.
This problem can be solved with jQuery like so:
<div class="linked">
Text
<div class="linked">
Text2
</div>
</div>
<script type="text/javascript">
$("a").each(function(){
var aTag = this;
$(aTag).ancestor('.linked').click(function(){
window.location.href = $(aTag).attr('href');
});
});
</script>
This gives you the best of all worlds: semantic HTML, and the auto propagation of a tag behavior up to the nearest 'linked' ancestor. It also conveniently allows for nesting.
I agree with what the other users suggested. A tag can only be inline elements and therefore cannot wrap any other elements. Solution is to use the onclick event to handle the case where the user will click on the div tag. Inside the div tag then you can put other a tags which can point somewhere else.
This method however has a flaw, that is search engines will not be able to crawl the link wherever the onclick event is pointing. One way to fix this is to have another explicit link on the page which will point to the same link as the onclick. Here is the example:
<div onclick="document.location.href = 'link1.html'">
<p>Content would go here...</p>
Click here or anywhere near me to go location 1
Click here to go to location 2
</div>
NOTE: The first a tag does not have to be inside the div tag.
This will allow users to click either inside the div or on the first a tag to go to link1.html, and the other a tag will go to link2.html. This will also allow search crawlers to index both links.
I would also recommend applying some CSS to the div tag, and wrapping the onclick javascript code into a function to make the code more manageable but that's not necessary.
Hope this helps.
If browser compatibility isn't of utmost importance, then you should have a look at this pure CSS solution. By using an AP anchor and the z-index property, you can have an anchor that's as big as the outer div that is layered on top of all the other contents.
In it's simplest form, it could look something like:
<div id="about_us">
<h3>About Us</h3>
<p>This website is the culmination of several months of intensive research
and collaboration. </p>
<p>We painstakingly gathered data and are presenting it to the world here. </p>
Read More
</div>
CSS:
#about_us {
position: relative;
}
#about_us a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-indent: -9999px;
}
This will give you anchor with the same size as the parent div, and is above all of the contents, as well as hide the link text so that it won't appear at the top left corner of the div.
For a more complex example, see: http://jsfiddle.net/545xy/2/
I am trying to figure out a way to display an archive of email newsletters on my client's site. The issue is that the newsletters are full of a zillion inline styles, which is great for seeing them in Outlook or wherever, but they're not looking too hot in an otherwise-nicely styled site.
My goal is for my client to be able to copy the entire source code of a generated newsletter (which her list management company* gives her access to) and paste it into the CMS (drupal, if it makes a difference).
*Constant Contact? Mail Chimp? I forget. One of those.
Then I'd like to display it on her site, inside the basic structure (header, nav, etc) of the rest of the site. If this was 1997, I'd say "iframes!" and be done with it, but A) that seems like a lame solution, and B) the code doesn't actually exist on a page by itself, which I think is required for iframes.
Is there some kind of tag I can put around this block of HTML to isolate it from the rest of the site's styles? Or is there another way to go about this entirely?
Thanks!
IFrames are the only way to go that I've ever been able to find. The only alternative to this would be to override every style in the parent page's CSS for the newsletter display area.
As you noted, using an iframe will probably require you to host the newsletters in an independent file. The only alternative to this that I'm aware of is that you can use JavaScript to dynamically create and/or populate the iframe.
If you go with this method, you could have the newsletter present in a div with a specific class, and then use JavaScript to move the div into an iframe. The big downside being that this wouldn't happen for users without JavaScript enabled.
9 years later and there still isn't a better solution.
If you don't have an external source (you can't add html into a frame manually) you need to use js to insert the messy html/css (in my case I use it to view emails)
<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>
and js:
const frame = document.querySelector('.my-frame');
frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();
Is there a reason why you can't use a modal? That would allow you to force a new request and make the page render how you'd want it to by not applying your general stylesheet while at the same time keeping your user on the desired page. Of course, it doesn't display the element inline so-to-speak, but it's nearly functionally equivelent.
Cutting and pasting raw HTML presents too many security problems, in my opinion. Never trust user's input. Even when the content is entirely benign, next week the designer of newsletter might decide to change their formatting or incorporate some javascript and you'll be responsible for anything that might go wrong.
Therefore I would implement a parser that would drop anything but the content part and leave only b, a, h*, blockquote and similar simple elements, like the ones allowed in forum posts, as well as their styles. After that, you can display it as a normal post in a CMS. I don't see any reason why that should look differently.
As for how to isolate that from your other CSS, you don't really need to if you are careful that all of CSS rules of your CMS apply to elements with specific classes. Alternatively, do a CSS reset for your posts:
.post p {
margin: 0;
...
.post /* all the standard CSS reset rules preceded with .post */
and then
<div class="post"> content parsed from your CMS </div>
Another option that I haven't used myself but am looking to possibly leverage in a similar situation is to use the Shadow DOM which is part of the Web Components spec. My main concern is that we still have some user's using IE 11 and while there seems to be support for polyfills it doesn't look like covering all browser's is real straight forward based on what I've read elsewhere.
Some details on how to use Shadow DOM to this effect can be found here and here. I've also created a small gist that I've created to demonstrate basic idea that I've been formulating as I learn about how the Shadow DOM works which I'll be updating as I learn more. Below you can see a snapshot of the content of that gist.
<!doctype html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px;
}
* {
color: Red;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<div id="content1">
SOME CONTENT FROM CMS
</div>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<div id="content2">
SOME MORE CONTENT FROM CMS
</div>
</div>
</div>
<script>
document
.getElementById("content1")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
document
.getElementById("content2")
.attachShadow({ mode: 'open' })
.innerHTML = `
<style>
*{all:initial}
style{display: none}
div{display: block}
</style>
<h3>This text is not red</h3>
<div>slot content: <slot></slot></div>`;
</script>
</body>
</html>