- Last post
- 11 Responses
Inhertited a large amount of content in a CMS. All inline content images are contained within the HTML5 <figure> tag. Some also have captions <figcaption>, some don’t.
I want to differentiate the styling of the figure tag whether it has a figcaption or not.
So there is:
<figure><img src="/path/name.jpg" alt="name">
<figcaption>My description here</ figcaption>
<img src="/path/name.jpg" alt="name">
Without adding a class manually, I want to style/target the ones with captions <figcaption> with a border (whole thing, not just the caption itself-- that would have been easy), and leave the ones without captions border free.
Any clever thoughts to target that, with CSS/JS without getting overly complicated.
You should be able to use jQuery to apply the CSS to only the figcaption elements.
That statement should be applied to all instances of <figcaption> throughout the page... at least I'm pretty sure.
^ Yeah that would work, although you would want to add the class to the figure element:
D'oh! Yeah sorry, ukit2 is right. I read your question too quickly.
Thanks @ ukit2 and nocomply.
This would work too...maybe a more direct way of doing it
Alright, you helpful chaps...
Could I expand on this and use jquery to wrap the image in an href to open itself in a new window or lightbox?
Most of the images are larger than displayed in the responsive layout, so they need only link to themselves, but since they were all inserted inline, I can't get a hook into them via the CMS without manually adding the href tags. The images do have a unique class assigned.
Just looking for options to reduce labor.
I love it when QBN goodness shines through. Thanks all!