0

I am styling a blog where the posts are in Markdown format. Images are wrapped in <p> tags when converted to HTML. The first paragraph after an image is the caption, and needs specific styling applied to it.

For example:

<p>Regular paragraph.</p>
<p><img src="/images/puppy.jpg" alt="Puppy" /></p>
<p>This is the caption.</p>
<p>Another paragraph.</p>

Is there a way to select only the paragraphs that follow a paragraph with an <img> tag in them? Something like this, perhaps? (Except that it doesn't work.)

p img + p {
  text-decoration: underline;
}

I'd rather not have to go into all the posts and manually add classes to all the captions if I don't have to.

EDIT: This is a Middleman blog (4.2.1) using Redcarpet (3.4.0).

Speedy1812
  • 61
  • 5
  • 3
    There is no way to accomplish this using CSS, no. You could always add a little line of JS to add a class to all that match (`[...document.querySelectorAll('p > img')].forEach(n => n.parentNode.nextSibling.classList.add('caption'))`, although this does not check if its a paragraph but you get the gist). Although the image is actually an inline element and does not need to be wrapped in a paragraph. Markdown does not include images in its core syntax, so it'll be your specific converter that does this, so maybe find a version that does not? – somethinghere Apr 19 '17 at 14:20
  • Put an image into a p tag is not a good thing. You shouldn't do this ! What are you trying to do ? – Baptiste Arnaud Apr 19 '17 at 14:20
  • this a typical javascript or script server task :) – G-Cyrillus Apr 19 '17 at 14:34
  • @somethinghere OK, thanks! – Speedy1812 Apr 19 '17 at 17:10

0 Answers0