const lnx = [...document.links];
lnx.forEach(lnk => lnk.addEventListener('click', viewHTML));
function viewHTML(e) {
const link = e.target;
const headers = document.querySelectorAll('.'+this.dataset.tag);
headers.forEach(hdr => {
if (!hdr.matches('.hide')) {
link.className = 'off';
let str = hdr.outerHTML;
let txt = document.createElement('div');
txt.className = 'txt';
hdr.insertAdjacentElement('afterend', txt);
hdr.nextElementSibling.insertAdjacentText('beforeend', str);
hdr.classList.add('hide');
} else {
link.className = '';
hdr.classList.remove('hide');
hdr.nextElementSibling.remove();
}
});
}
body {
font: 400 2.5vw/1.5 Consolas
}
[class^=header] {
font-family: Arial;
}
/* Header (OP)
Selector fails -- :not() is prefixed incorrectly
.header:... means .header is targeted
.header :... means the descendants of .header is targeted
There is no .header.A, .header.B, nor .header.A.B
so .header without .A and/or .B will have everything in italics
*/
.header:not(.A):not(.B) {
font-style: italic;
}
/* Header 1
Best solution with no extra HTML tags:
Assign font-style: normal...
directly (.C1, .D1)
or by class (.N)
*/
.header1 {
font-style: italic;
}
.C1,
.D1,
.N {
font-style: normal;
}
/* Header 2
Using :not() needs extra HTML tag:
Wrap second textnode in an inline or inline-block tag
As content of a descendant tag, the text can be targeted
*/
.header2 *:not(.E):not(.F) {
font-style: italic;
}
/* Header 3
Smart solution with extra HTML tag:
Wrap second textnode in <i> or <em>
*/
.header3 {
/* no styles needed */
}
/* Header 4
Slickest solution with least HTML:
Wrap text that needs italics in <i> and then style lines with CSS
*/
.header4 {
white-space: pre-line;
}
/* For Demo Purposes */
.dash {
border-style: dashed;
}
.edge {
border-style: ridge;
border-width: 3px;
}
summary:hover {
color: lime;
background: #000;
cursor: pointer;
}
summary + u {
display: inline-block;
text-decoration: none;
white-space: pre-line;
}
code {
color: green;
background: rgba(0, 0, 0, 0.2);
white-space: pre;
}
summary + code {
display: block;
}
a {
display: block;
text-decoration: none;
text-align: center;
}
a:link,
a:visited {
color: cyan;
background: #000;
}
a:hover,
a:active {
color: blue;
background: none;
}
a::before {
content: 'View .'attr(data-tag);
}
a.off::before {
content: 'Hide .'attr(data-tag);
}
a::after {
content: ' HTML';
}
.hide {
display: none;
}
.txt {
color: blue;
background: rgba(0, 0, 0, 0.2);
white-space: pre;
}
<main>
<hr class='edge'>
<details><summary>Header (OP)</summary>
<u>Selector fails -- :not() is prefixed incorrectly
.header:... means .header is targeted 👎
.header<code>␣</code>:... means the descendants of .header is targeted 👍
There is no .header.A, .header.B, nor .header.A.B so
.header <em>without</em> .A and/or .B will have everything in italics</u></details>
<details><summary>CSS</summary>
<code>.header:not(.A):not(.B) {
font-style: italic;
}</code>
<a href='#/' data-tag='header'></a>
</details>
<hr>
<div class='header'>
<span class="A">LatestFooty.co.uk</span> is currently available for sale, along with:
<div class="B">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='edge'>
<details><summary>Header 1</summary>
<u>Best solution with no extra HTML tags:
Assign <code>font-style: normal</code>...
directly (.C1, .D1)
or by class (.N)</u></details>
<details><summary>CSS</summary>
<code>.header1 {
font-style: italic;
}
.C1,
.D1,
.N {
font-style: normal;
}</code>
<a href='#/' data-tag='header1'></a>
</details>
<hr>
<div class="header1">
<span class="C1">LatestFooty.co.uk</span> is currently available for sale, along with:
<div class="D1">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='dash'>
<div class="header1">
<span class="C2 N">LatestFooty.co.uk</span> is currently available for sale, along with:
<div class="D2 N">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='edge'>
<details><summary>Header 2</summary>
<u>Using :not() needs extra HTML tag:
Wrap second textnode in an inline or inline-block tag
As content of a descendant tag, the text can be targeted</u></details>
<details><summary>CSS</summary>
<code>.header2 *:not(.E):not(.F) {
font-style: italic;
}</code>
<a href='#/' data-tag='header2'></a>
</details>
<hr>
<div class='header2'>
<span class="E">LatestFooty.co.uk</span> <span>is currently available for sale, along with:</span>
<div class="F">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='edge'>
<details><summary>Header 3</summary>
<u>Smart solution with extra HTML tag:
Wrap second textnode in <code><i></code> or <code><em></code></u></details>
<details><summary>CSS</summary>
<code>.header3 {
/* no styles needed */
}</code>
<a href='#/' data-tag='header3'></a>
</details>
<hr>
<div class='header3'>
<span class="G">LatestFooty.co.uk</span> <i>is currently available for sale, along with:</i>
<div class="H">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='edge'>
<details><summary>Header 4</summary>
<u>Slickest solution with least HTML:
Wrap text that needs italics in <code><i></code> and then style lines with CSS</u></details>
<details><summary>CSS</summary>
<code>.header4 {
white-space: pre-line;
}</code>
<a href='#/' data-tag='header4'></a>
</details>
<hr>
<header class='header4'>LatestFooty.co.uk <i>is currently available for sale, along with:</i>
LatestFootie.com
LatestFootie.co.uk
</header>
</main>