Will Native PDF's CSS let me use a pseudo-class?

[Eric_Amble]

In our DITA content, sometimes we have a <fig> with no <title> inside, and sometimes there's a title.

We move the title to the bottom, and so in the cases where a title is present in the <fig>, we want to give the <fig> element some padding at the bottom... but only in the cases where the <fig> has a <title>.

In the intermediate HTML, the <fig> becomes <figure>, and the <title> becomes <figcaption>.

So, in our CSS for making a Native PDF, I set up a very simple pseudo-class:

figure:has(figcaption) {
border: 0.5pt solid blue;
padding-bottom: 24pt;
}

...with the border there so I could see whether the element was being selected.

When I output the merged HTML and look at it in Chrome or Edge, this works fine. In the output PDF, however, this doesn't work. The element is not selected and is not formatted.

So, I'm wondering if there are any special considerations for using pseudo-classes in CSS with Native PDF... or alternatively, can you suggest a way to select the parent element when a figcaption element appears... but in a way that doesn't require ":has"?

Thanks,

Eric A.

[vikchand]

Hi Eric,

Currently Native PDF does not support :has pseudo selector, so this style won't work. Also we do not have any other CSS solution which would work in this situation. However you can achieve this using a combination of CSS and JavaScript. Follow the steps given below -

Step 1: Update the above style rule to use a class

.figure-with-caption {
  border: 0.5pt solid blue;
  padding-bottom: 24pt;
}

Step 2: Add the script given below in the toc layout under data-region="content" div

<script type="text/javascript">
      window.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('figcaption').forEach(function(caption) {
          caption.parentElement.classList.add('figure-with-caption')
        })
      })
</script>

NOTE:  If you are not using TOC in your PDF then you can add it in any other layout which you are using.

Step 3: Enable JavaScript  from the advanced tab of PDF preset settings.

Step4: Generate the output.

[Eric_Amble]

Thanks very much! I tried this, and it worked perfectly.

To make sure this doesn't happen again, is there any list anywhere of any CSS we shouldn't be using in Guides Native PDF? For example, are there other pseudo-selectors that are known not to work?

Thanks again,

Eric

[VivekKumar]

Hi Eric,

Out of :is(), :not(), :where() and :has(), - only :not() is supported right now.

Work is going on for :is(), :has() and :where(). Expected to be supported by mid-next year.

Thanks,

Vivek