Select ::after element using CSS3

Question

I'm trying to get to the .dropdown::after element but only if the first child has the attribute x-placement set to bottom-start.

<div class="dropdown js-dropdown">
   <ul class="dropdown-menu js-dropdown-menu show" x-placement="bottom-start"
       ...
   </ul>

   <button class="btn dropdown-btn js-dropdown-btn">
       Enter salutation...
   </button>

   ::after
</div>

It seems to me that something like this should work, but unfortunately neither solution will work:

.js-dropdown [x-placement^=bottom] ~ ::after {
    background: red;
}

.js-dropdown [x-placement^=bottom] + ::after {
    background: red;
}

Is this even possible?

.js-dropdown [x-placement^=bottom] ~ ::after {
    background: red;
}

.js-dropdown [x-placement^=bottom] + ::after {
    background: red;
}

`x-placement` is an invalid HTML5 attribute. Read: [Using Data Attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) — Roko C. Buljan, Jan 22 '23 at 01:18
Perhaps it's some ancient Popper.js version? Cannot see any such invalid `x-` attributes in [Popper v2](https://popper.js.org/docs/v2/tutorial/). I see they suggest the use of the proper `data-popper-placement` attributes. — Roko C. Buljan, Jan 22 '23 at 01:33

score 0 · Accepted Answer · answered Jan 22 '23 at 01:26

Sure you can, use the CSS :has() pseudo class:

.dropdown::after { content: "I'm an after pseudo element"; }

.js-dropdown:has([x-placement="bottom-start"])::after {
    background: red;
}

<div class="dropdown js-dropdown">
   <ul class="dropdown-menu js-dropdown-menu show" x-placement="bottom-start">
       <li>...</li>
   </ul>

   <button class="btn dropdown-btn js-dropdown-btn">Enter salutation...</button>
</div>

Select ::after element using CSS3

1 Answers1