Hey!
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
{% include "email/partials/button.html" with context %}
[Link]({{ button_url }})
It gets rendered into the following HTML using Jinja and then Python-Markdown:
<p>Hey!</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.</p>
<div>
<a href="https://example.com">
<span style="mso-text-raise: 16px">
Continue reading →
</span>
</a>
</div>
<p><a href="https://example.com">Link</a></p>
Then I wrap it into the <main> tag for css-inliner to recognize it as a fragment, and then inline the following CSS:
p {
font-size: 16px;
line-height: 24px;
color: #475569;
margin: 0 0 16px;
}
a {
color: #2563eb;
text-decoration: underline;
}
Question: how can I prevent the inliner from touching any elements that are inside of the included button div without adding data-css-inline="ignore" to every <a> and <p>?
I tried using :has() and :not() CSS selectors, but they seem to be ignored:
a:not(*[data-raw] a) {
color: #2563eb;
text-decoration: underline;
}
I have an email written in Markdown:
It gets rendered into the following HTML using Jinja and then Python-Markdown:
Then I wrap it into the
<main>
tag for css-inliner to recognize it as a fragment, and then inline the following CSS:Question: how can I prevent the inliner from touching any elements that are inside of the included button
div
without addingdata-css-inline="ignore"
to every<a>
and<p>
?I tried using
:has()
and:not()
CSS selectors, but they seem to be ignored: