Target HTML tag using CSS based on specific value

Question

Is it possible to target HTML tag using CSS based on a specific value?

For e.g.

<style>
    div.test-field[value="Moshe"] ~ * {display: none;}
    div.test-field[value="Dana"] ~ * {background-color: red;}
</stlye>

<div>
  <div class="test-field">Moshe</div>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>

<div>
  <div class="test-field">Dana</div>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>

If not, it is possible to do this using JS?

So far I tried: I tried using CSS and didn't find any solution, I tried Jquery and I came up with this line of code:

$('div.test-field:contains("Moshe")').hide();

But this one doesn't help me because I can hide only the specific tag but I can't perform a CSS function on it like that one I'm trying to achieve (~ * {display: none;})

I tried also to implement a function when the page loads without any success.

My main goal is to hide all HTML tags after a specific HTML tag with a specific value.

Thanks!