Conditional CSS
- Started
- Last post
- 11 Responses
- ETM
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>
</figure><figure>
<img src="/path/name.jpg" alt="name">
</figure>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.
- nocomply0
You should be able to use jQuery to apply the CSS to only the figcaption elements.
- nocomply0
Something like:
$("figcaption").addClass("myClas...
That statement should be applied to all instances of <figcaption> throughout the page... at least I'm pretty sure.
- Code truncated, sorry. See http://api.jquery.co…nocomply
- ukit20
^ Yeah that would work, although you would want to add the class to the figure element:
$("figcaption").parent().addClas...
- ukit20
$("figcaption").parent(). addClass("border");
- nocomply0
D'oh! Yeah sorry, ukit2 is right. I read your question too quickly.
- ETM0
Makes sense.
Thanks @ ukit2 and nocomply.
- ukit20
This would work too...maybe a more direct way of doing it
$("figure").has("figcaption"). addClass("border");
- ETM0
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 believe there are jquery lightboxes.. Or using a conventional lightbox, trigger it with figure, not relmikotondria3
- ETM0
I love it when QBN goodness shines through. Thanks all!