New Var format of dynamic content in CSS

i’ve noticed that when I use dynamic content in my CSS, it now outputs a var with a dynamically generated name. In most cases this is fine, however I have one problem… I am not always using these dynamic content tags in a var context!

For this example, I’ve got a loop of posts, and I want to hide individual items that don’t match a certain taxonomy. The taxonomy ID is stored in a URL parameter.
What I tried:

  1. Create a looper inside my post consumer that fetches all the taxonomy items.

  2. Give the taxonomy items a custom attribute called iamid that has {{dc:term:id}}

  3. Go back up to the parent (the post item) and add the following CSS

    $el:has(:not([iamid=’{{dc:url:param key=“iam”}}’])) {display:none;}
    $el:has([iamid=’{{dc:url:param key=“iam”}}’]) {display:block;}

Unfortunately, this outputs the following :
.e11901-e40:has(:not([iamid=‘var(–tco-dc96l-1n)’])) {
display: none;
}
.e11901-e40:has([iamid=‘var(–tco-dc96l-1o)’]) {
display: block;
}

I can’t find confirmation that vars are not allowed in this type of pseudo selector, but it certainly doesn’t seem to work, and when I manually enter an ID in place of the dynamic content to test, the CSS rule itself does work.

$el:has(:not([iamid=“561”])) {display:none;}
$el:has([iamid=“561”]) {display:block;}

Is there a flag that can be included in the dynamic tag to tell it to output a raw number?

I tried type=“image-css-url” (single and double quote versions) from the help docs but it still output a var for me. And just for funsies tried type=‘json’ pretty_print=‘1’ also.

Is there another way I can do what I’m after?

Maybe conditionals are a smarter choice, but I couldn’t figure out how to make that work, since I’d have to get terms for the current post before I could filter them on the URL parameter.

Thanks gang!

In your case I would try renderInFrame in your parameters, doc below. It uses var() so it would properly work with different breakpoint values, but in your case I don’t think that would work with a conditional has() statement. Let me know if this helps.