Is it possible to change the css of a div(a) under certain conditions?

Question

css

I'm making a template for Joomla. One menu item displays category content in the form of a blog. In design, the background-color of the parent div of the blog and content page is different. My question sounds like this: Is it possible to change the css of the parent div (in my case it is a div with class="content-center"), provided that another div with a certain class appears inside this div?
Now the code looks like this:
Blog page code -

<div class="content-center">
<div class="c-left-col"></div>
<div class="c-right-col"></div>
</div>

Material page code -

<div class="content-center">
<div class="c-left-col"></div>
<div class="c-right-col"><div class="item-page"></div></div>
</div>

Answer 1

Sketched something codepen.io/aliencash/pen/KpMMKQ
If you uncomment <div id="show" class="item-page"></div>and click on content-center, its background will change.
As long as id="show" is commented out, you can click as much as you want, the background will not change.
Commenting out / uncommenting a div is an emulation of its appearance or disappearance as a result of cms work.

Answer 2

Now there is no way to do without JavaScript, since the selector :hasis not currently supported anywhere. Learn more about CSS 4th level selectors . Link to draft specification .
I would advise you to put a conditional construct in the template on the CMS side or use separate templates for these pages, because for the sake of such JS is not written.

Answer 3

overlay the parent div with a bold border, essentially mimic what you want. In fact, there are many solutions. The main thing is to understand what you expect to see.