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 anding 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!

CSS cannot select elements that come before the current element in the selector, so you would need to move the `.show/hide` element to be before the `#toggle` element. That way, you'd be able to do `#holder>#data.show~#toggle>#content::after` — Niet the Dark Absol, Jun 19 '20 at 14:13
@CBroe I prefer not giving another structure to the document as I use bootstrap and they might frown upon it. And also, the questions in StackOverflow intended for the whole community and therefore seeking a general solution is the better approach. — Michael, Jun 19 '20 at 14:19
I don’t get how this is a problem to begin with then - Bootstrap sets appropriate classes on these elements to identify whether they are in an open or collapsed state. — CBroe, Jun 19 '20 at 14:19

score 0 · Answer 1 · answered Jun 19 '20 at 14:18

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 */ }

CSS selecting combining multiple selectors

1 Answers1