<...">
Geek asks and answers

How to target an element with a specific css attribute (only for CSS solution)?

I have an HTML snippet as shown 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 assign specific CSS rules, such as an attribute selector?

+3
source share
2 answers

You cannot write a CSS rule in which a property is set depending on whether the value of another property satisfies a certain condition. This seems to be what you are asking for, even if you are referencing CSS attributes. (There are no attributes in CSS, there is an attribute selector, but they relate to HTML or XML attributes.)

CSS, , - - (, , , ).

+1

( ), -

:

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;
    }
}

, , 750px +, 150 - .status-icon

0

More articles:


All Articles