Apply a CSS style Iif no element with a given class is in the DOM?

Tsaukpaetra

I'm attempting to make a page where only a specific element should be printed based on if it has a printing class on it, and the normal behavior otherwise.

I'm attempting to do this with the following:


@media print {
    body *:where(:not(.printing)) {
        visibility: hidden;
        height: 0;
        background: none;
    }

    .printing,
    .printing * {
        visibility: visible;
        height: auto;
        overflow: visible !important;
    }

    .printing {
        position: absolute;
        left: 0;
        top: 0;
    }
}

Works great when I've tagged an element with that class, but obviously if nothing has that class everything gets hidden.

Is there any magic I can use to take that first rule and only apply it if and only if there is any element with the printing class?
Most of the things I see always want to match the impacting elements.

Unperverted Vixen

@Tsaukpaetra

    :root {
        --printing-visibility: visible;
    }

    :root:has(.printing) {
        --printing-visibility: hidden;
}

    body *:where(:not(.printing)) {
        visibility: var(--printing-visibility);
        height: 0;
        background: none;
    }

Tsaukpaetra

@Unperverted-Vixen said in Apply a CSS style Iif no element with a given class is in the DOM?:

--printing-visibility

TIL about variables.

Seems to be working as expected, thanks!

Now to cherry-pick stuff to exclude from the

Edit: Hrm, magic is happening. I thought it was working, but seems more tweaking is needed...

Tsaukpaetra

@Tsaukpaetra said in Apply a CSS style Iif no element with a given class is in the DOM?:

Hrm, magic is happening.

Status: Stupid magic...

Why is this rule fucking matching? The damn thing literally says "Where not .printing" what the hell am I missing here?

cheong

I would just limit the "magic" to DIV elements and use DIV as containers to control whether you should show the child elements, though.

And you're advised to check whether it would break menus and custom made drop down controls.

Unperverted Vixen

@Tsaukpaetra Could it be inherited from the parent div? I didn’t do any nesting in my tests.

cheong

@Unperverted-Vixen Yup testing is needed because unlike "display: none", the children can override.

Tsaukpaetra

@cheong said in Apply a CSS style Iif no element with a given class is in the DOM?:

And you're advised to check whether it would break menus and custom made drop down controls.

Yeah those are broken for sure but I'm fine with that, nothing in them should be printed anyways.

Now, the dialog box contents, that's another story....