如何在不使用 jquery 或 js 的情况下应用条件 css

Question

I have a code like this

<div class="abc">
    <componentName > abc </componentName>
    <component2> </component2> 
</div>

component2 is getting values from DB, and I want when component2 doesn't get any value, I want it to be hidden or display: none. But I've to do it using via CSS only and I can't add any class in components, I cant use JS, react, or jquery. Any workaround will be helpful.

Answer 1

For now, when it's empty I have applied display: none; there when it's empty or do not have any value. Play by putting values in it and make it empty again. or you can also check the CSS by inspecting the element

 componenet2:empty { display: none; }

 <div class="abc"> <componentName > abc </componentName> <componenet2></componenet2> </div>