Question: Is it possible, without SASS, LESS, Javascript - just pure CSS to do something similiar to:

```
.B
{
    display: none;
}

.A:empty
{
     display: none;

     .B
     {
         display: block;
     }
}

```

So that when class 'A' is empty do something else with container 'B'?
Or that when class 'A' is having some state - do something else with container B?

Examples:

```
Hover A -> Hide B
Hide B -> Show C
C Empty -> Show D

```

I've tried finding the correct terms for these states but haven't found anything yet - if there is any? 

**Non dependant:**

I don't want the classes to be dependant upon eachother. 

```
<div class="A"><div class="B"></div></div> 

```

...is not a solution. 

```
<div class="A"></div>
<div class="B">Show me when condition in A is reached<div>

```

Since then I can just do whatever I wanted fine. I want class A to be on some part of the page and class B inside some other container somewhere else - non relative to class A.

Answer: 
> 
> edit: to add more info
> 
> 
> 

Every time someone tells you something doesn't exist, isn't worth doing or better to just do it like they do. DOUBLE DOWN ON YOUR RESEARCH.

Links:

* <https://www.w3.org/TR/css3-conditional/>
* <https://tabatkins.github.io/specs/css-when-else/>
* <https://www.w3schools.com/cssref/css_selectors.asp>
* <https://www.w3schools.com/cssref/sel_attribute_value.asp>
* <https://logichop.com/docs/logic-hop-conditional-css/>

Example:

```
 <style type="text/css">
      /* year comes last */
      time[datetime]:after {
        float: right;
        content: attr(datetime);
      }

      /* month and day come first */
      time[datetime*="-"] {
        float: left;
      }

      /* Months (non-USA) */
      time[datetime^="01-"]:after {
        content: "jan/";
      }

      ...rules for the other months go here...

      time[datetime^="12-"]:after {
        content: "dec/";
      }

      /* Days (non-USA) */
      time[datetime$="-01"]:before {
        content: "1/";
      }

      ...rules for the other days go here...

      time[datetime$="-31"]:before {
        content: "31/";
      }

      /* Months (USA) */
      *[lang="en-US"] time[datetime^="01-"]:before {
        content: "jan/";
      }

      ...rules for the other months go here...

      *[lang="en-US"] time[datetime^="12-"]:before {
        content: "dec/";
      }

      /* Days (USA) */
      *[lang="en-US"] time[datetime$="-01"]:after {
        content: "1/";
      }

      ...rules for the other days go here...

      *[lang="en-US"] time[datetime$="-31"]:after {
        content: "31/";
      }

  </style>

```
No, there is no way. The following condition can be achieved, when the element has both A and B classes on it. Another way is wrapping elements with those classes in another tag, like

```
<div class="wrapper">
  <div class="A"></div>
  <div class="B"></div>
</div>

```

, then doing following in .css:

`.wrapper.A:hover + .B {...}`