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?

How your div can be 150px wide if you specify 100px ?

Fabrizio Calderan
– Fabrizio Calderan

2014-02-13 12:33:11 +00:00
Commented Feb 13, 2014 at 12:33 — Fabrizio Calderan
– Fabrizio Calderan, Commented Feb 13, 2014 at 12:33

Jukka K. Korpela · Accepted Answer · 2014-02-13 12:54:43Z

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).

answered Feb 13, 2014 at 12:54

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danield · Accepted Answer · 2014-02-13 12:42:06Z

0

If you define status as a percentage (instead of fixed pixels) then you can do this with media queries

like so:

FIDDLE

.status {
    width: 20%;
    height: 100px;
    background: blue;
}
.status-icon {
    display: none;
    color: white;
}
/* 20% of 750px = 150px */
@media (min-width: 750px) {  
    .status-icon
    {
        display: block;
    }
}

So now when the viewport width hits 750px+ the status element will be 150px wide and with the media media query we can set .status-icon to block

answered Feb 13, 2014 at 12:42

Danield

127k37 gold badges235 silver badges267 bronze badges

1 Comment

Mr. Alien Over a year ago

I thought of this, but may be he is changing the width on the flow

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related