css styling based on another elements class?

Question

Is it possible to do this without JS and how would I write it? If the .content-pto.active then I want to change the span.ico to animate....

<div id="pto-button">
    <div>
        <div class="title-pto">
          <div>content<span class="ico"></span></div>
        </div>
        <div class="content-pto active">
            <p>more content</p>
        </div>
    </div>
</div>

Not with your current HTML structure. CSS can only target child and sibling elements (there is no "previous sibling" selector), it cannot navigate upwards or backwards in the DOM. The C stands for Cascading, think if it like water flowing. — zgood, Mar 28 '18 at 16:30
If you can, I would of instead add your `active` class to your `pto-button` div and then adjust your styles accordingly. Then you could do this `#pto-button.active span.ico { /*animate*/ }` and `#pto-button.active .content-pto { /*active styles*/ }` — zgood, Mar 28 '18 at 16:35

score 0 · Answer 1 · answered Mar 28 '18 at 17:04

Unfortunately the closest you can come with CSS alone is the "sibling selector", but it only works in forwards order. For instance, if your markup looked like:

<div id="pto-button">
    <div>
        <div class="content-pto active">
            <p>more content</p>
        </div>
        <div class="title-pto">
          <div>content<span class="ico"></span></div>
        </div>
    </div>
</div>

in that case you could write CSS like

.content-pto.active ~ .title-pto .ico {
}

or

.content-pto.active + .title-pto .ico {
}

depending if you want any subsequent element, or only the adjacent one, respectively. But the reverse is impossible! It has been suggested by the community but declined to be added to the CSS spec for performance reasons, as I understand it.

css styling based on another elements class?

1 Answers1