HTML CSS style: hiding an HTML container and its HTML child controls

I have the following HTML template rendering problem: on an HTML page, i have 2 parent root containers (<div>, <p>… Whatever) that have sub-containers and HTML controls laid out on them.

I would like that, when the 1st HTML container is hidden with all its children, then the 2nd one is visible. And vice versa. I wanted to do this, by injecting the word "hidden" in one of my 2 parent root containers, and "" in the other. My problem is that injecting "hidden" into a <p> tag doesn’t hide its child containers and controls.

Afterwards, i’ve looked at the side of an injection of a style that could be named ".hideMeWithMyChildren". I saw, too, that there were selectors of style ("<" i.e. "MeAndMyParent", or ">" i.e. "MeAndMyChildren").

Now, my question is: how can i write a named style (for example ".hideMeWithMyChildren") that uses this selector too, in order to hide recursively a HTLM container and its children?

Regards.

<div {+HIDDEN_IF_USER_DOES_NOT_TALK_IN_ENGLISH+}>
    Hello, from the root-parent DIV element
    <p>
        Hello, from its child sub-paragraph
    </p>
</div>