How to target an element with specific css attribute (CSS Only Solution)?

Question

I have an HTML snippet like below:

<div class="status">
    <div class="status-icon green">
      Online
    </div>
</div>

and related css:

.status {
  width: 100px;
}
.status-icon {
  display: none;
}

My question is:

How can I write a css rule when .status{width=150px} then .status-icon{display: block;}?

Or is there a selector to target specific css rules like attribute selectors?

Answer 1

You cannot write a CSS rule where a property is set depending on whether the value of another property satisfies some condition. This seems to be what you are asking, even though you refer to CSS attributes. (There are no attributes in CSS; there are attribute selectors, but they refer to HTML or XML attributes.)

CSS as currently defined is simply a style sheet language with no programming features (or, let us say, with very limited programming-like features).