CSS selecting combining multiple selectors

Question

(Not quite related to CSS "and" and "or" , or Is there a CSS parent selector? , as I am trying to achieve different goal here - either and ing two selectors or creating a different HTML structure that can be used by css to solve my problem)

Hi, I wanted to know if there is any plausible way in CSS to make a logical AND between selectors. This seems quite easy when I only refer to one DOM element, but when I try referring to many, the whole concept becomes much harder.

I'll give my example:

I have the following HTML structure, representing an accordion:

<div id="holder">
    <div id="toggle">
        <div id="content"></div>
    </div>
    <div id="data" class="show|hide">
    </div>
</div>

(BTW, I am using the bootstrap logic for the accordion, so I prefer not changing a lot in the given structure)

I want to set #content::after depending on whether hide or show are the active state.

This could be converted to the following statement:

#hodler > #data.show && #holder > #toggle > #content::after

However, this is an invalid syntax. Moreover, CSS does not parent selector. Any solutions?

Thanks!

Answer 1

This is not possible with just CSS and the current HTML.

If the order of the #toggle and #data elements were reversed, you could use the adjacent sibling combinator ( + ) like this:

<div id="holder">
    <div id="data" class="show|hide"></div>
    <div id="toggle">
        <div id="content"></div>
    </div>
</div>

#data.show + #toggle #content:after { /* show styles */ }
#data.hide + #toggle #content:after { /* hide styles */ }