Pseudo selector :has() removes effect

Issue

I'm creating a presentation using reveal.js (from Quarto) and would like to tweak the CSS a bit. Here, I would like to add a margin to a certain div if it is followed by a paragraph.

Without the :has() pseudo selector, there is a visible effect:

div.cell {
  margin-bottom: 3em;
}

However, when I add it, there is no effect whatsoever:

div.cell:has(+ p) {
  margin-bottom: 3em;
}

Does anyone have an idea why this might be the case? I know a bit of plain vanilla CSS, otherwise my understanding is limited. But the mdn documentation seems to suggest that my code should work...

Below is a screenshot of the div element I would like to target. I'm using an up-to-date version of Firefox.

Solution

I'm using an up-to-date version of Firefox.

Firefox currently does not have support for :has (it looks like it is due to land in Firefox 121 which is due December 2023).

It is available behind a feature flag and enabled by default in Firefox Nightly.

Details of the state of the feature are available in the Firefox bug tracker.

Answered By - Quentin