Pure CSS conditional styling - is there such a thing?

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.

CSS is all about conditional styling using selectors. What you're asking is whether some specific combinations are possible. The answer is not all of them are, because selectors have a number of limitations to them. The concepts are explored in depth [here](https://stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit). In short it's all about the structure. Parent and previous-sibling combinations mostly aren't possible. — BoltClock, Oct 30 '18 at 09:36
There is no conditional CSS, but you may use a "sibling selector" to change look and fill of elements in the same container. Here is a working demo: [Sibling selector](http://cssdeck.com/labs/jri9mfef) — DanieleAlessandra, Oct 30 '18 at 09:46

score 2 · Answer 1 · answered Dec 09 '19 at 19:15

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:

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>

score 1 · Answer 2 · answered Oct 30 '18 at 09:37

1

No CSS does not support any pre-built conditions similar to what you are describing, sorry

answered Oct 30 '18 at 09:37

anon

816
5
17

score 0 · Answer 3 · answered Oct 30 '18 at 09:43

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 {...}

score 0 · Answer 4 · answered Oct 30 '18 at 09:48

HTML:

<div class="container">
  <div class="A">One</div>
  <div class="B">Two</div>
  <div class="C">Three</div>
  <div class="D">Four</div>
</div>

CSS:

.container {
  position: relative;
}
.container > div {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  transition: 200ms all;
}
.A {
  left: 10px;
}
.B {
  left: 120px;
}
.C {
  left: 230px;
}
.D {
  left: 340px;
}
.A:hover ~ .B {
  background-color: green;
}
.A:hover ~ .C {
  opacity: 0;
}
.A:hover ~ .D {
  transform: rotate(-45deg);
}
.B:hover ~ .C {
  background-color: green;
}
.B:hover ~ .D {
  opacity: 0;
}

Working demo: Sibling selector

Don't want the classes to be dependant upon being wrapped in a parent class. I want class A and B to stand separate. It does not seem to be the case here? — Deukalion, Oct 30 '18 at 09:59

Pure CSS conditional styling - is there such a thing?

4 Answers4