javascript - How to make text hidden or revealed when inside or outside a <div>? -

I have some text like this:

  Once upon a time, & lt; Div class = "light" & gt; Lives there & lt; / Div & gt; A Cat. & Lt; Div class = "light" & gt; Cat likes & lt; / Div & gt; To see fish swim  

let me give some text to a & lt; Div & gt; In the example & lt; Div class = "hidden_when_inside" & gt; Text & lt; / Div & gt; which is hidden inside & lt; Div class = "light" & gt; , but is not hidden out. E.g. Once, once,

gt; There & lt; Div class = "hidden_when_inside" & gt; This text is invisible & lt; / Div & gt; Lived & lt; / Div & gt; A Cat. & Lt; Div class = "light" & gt; Cat likes & lt; / Div & gt; To view & lt; Div class = "hidden_when_inside" & gt; This text is visible & lt; / Div & gt; Fish swim similarly, and lieutenant; Div class = "hidden_when_outside" & gt; Some text in will be hidden only when

div class = "

Here is the hidden meaning: < Ul>

The text can not be seen.

The text can not be selected.

There is no longer any text in the text.

Text Do not interfere with the formatting of other text.

Is there any way to hide it or another

?

Parent selector to hide element inside as below Use.

  .light .hidden_when_inside {display: none}