0

I have a list similar to:

<ul class="products">
    <li class="product-category">
    <li class="product-category">
    <li class="product">
    <li class="product">
</ul>

If there is at least one li.product-category in the list, I need a selector to target ul::after. In other words I want to select ul::after when preceeded by a li.product-category.

My failed attempts:

li.product-category ~ ul::after {}
li.product-category ~ ::after {}
ul > li.product-category ~ ::after {}
ul > li.product-category ~ :scope::after {}
barsdeveloper
  • 930
  • 8
  • 28
  • 2
    you cannot do this with CSS (at least for now) – Temani Afif Feb 23 '21 at 11:25
  • ＠TermaniAfif is it talking about to select the pseudo element after the first ```.product-category```? – tcf01 Feb 23 '21 at 11:28
  • 1
    You're effectively looking for the [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) pseudo-class, which is (currently) unavailable in any browser identified by MDN (previous link) or [Can I Use?](https://caniuse.com/css-has). Until such a time as that is implemented in browsers you'd need to use JavaScript. – David Thomas Feb 23 '21 at 11:44
  • 1
    See also [Can I target a :before or :after pseudo-element with a sibling combinator?](https://stackoverflow.com/questions/7735267/can-i-target-a-before-or-after-pseudo-element-with-a-sibling-combinator) – BoltClock Feb 24 '21 at 04:30

0 Answers0