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.”

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 (a.k.a. have no Text nodes) — like the <span> when {{lead.First Name}} is empty. And :has selects elements that contain elements matching another selector.

So the combo :has(:empty) means “element that contains an empty element.” Then you can style the parent element to your heart’s content.

← TEKNKL :: Blog