Sunday, 29 January 2023

Apply a CSS class to captions under all images (in JavaScript)

I'm using the Divi theme builder on my site. I've placed captions under each of my images in a text block. The captions are all in italics. Could anyone tell me if it's possible for me add some JavaScript that would automatically recognise the caption lines and apply a CSS class to them? It would be good if this could be automated as it would be very time consuming to manually add the CSS class to each caption.

This is the HTML I'm using:

<div class="dmpro_timeline_item_description">
  <p>
    <a style="color: inherit;" href="https://path-to-image.jpg">
      <img decoding="async" loading="lazy" src="https://path-to-image.jpg" width="300" height="237" alt="" class="wp-image-2179 alignnone size-medium" srcset="https://path-to-image.jpg 300w, https://path-to-image.jpg 1024w, https://path-to-image.jpg 768w, https://path-to-image.jpg 1536w, https://path-to-image.jpg 2048w, https://path-to-image.jpg 15w, https://path-to-image.jpg 1080w, https://path-to-image.jpg 1280w, https://path-to-image.jpg 980w, https://path-to-image.jpg 480w" sizes="(max-width: 300px) 100vw, 300px">
      <br>
      <em>This is the image caption text.</em>
    </a>
  </p>
  <p>This is where further details go (outside of the caption)</p>
</div>


from Apply a CSS class to captions under all images (in JavaScript)

No comments:

Post a Comment