Want to hide a personalized LP section when a {{lead.token}} is empty? Just use CSS :has(:empty)
Say you have an LP section like this:
<div id="intro">
Good to see you back, {{lead.First Name}}. You can still benefit from intro pricing if you sign up before June 1st.
</div>
The LP is public, so some sessions will be anonymous and {{lead.First Name}} is empty. Heck, even if the session is associated with a known lead, if you don’t know their First Name you don’t want to fall back to “friendo” or anything.
So the whole section must be hidden if {{lead.First Name}} comes up empty.
You can do this using just CSS, no JS required! First, put a <span> around the token:
<div id="intro">
Good to see you back, <span id="name-token">{{lead.First Name}}</span>. You can still benefit from intro pricing if you sign up before June 1st.
</div>
Then use this CSS:
#intro:has(#name-token:empty) {
display: none;
}
CSS :empty selects elements that are completely empty, including whitespace (a.k.a. have no Text nodes) wh
