owl-item css selectors?

Hi there,

The one unique element of each image is applied to the anchor tag. There’s a unique data-attachment-id applied to each image, so you could target the image (or the link) with something like the following:

.foo-item a[data-attachment-id="611"] img {
    border: 6px solid red;
}

If you need something more specific, give me a link to the page where you’re using Owl Carousel and give me details on what you want to do exactly and I’ll dig into it. Thanks!

Unfortunately, my images are not linked to anything, so no attachment id to work with. Have tried pseudo-classes nth/first-of-type, first-child, etc, but not much luck. I can get all of them to change to the same color using the nth/first pseudos, but ideally, I want to use a couple of different caption background colors – first item orange, second item green, third item blue, fourth item back to orange, etc.

Ahhh… hm. That’s a good feature request. I agree that each image should have a unique identifier whether it has a link or not.

Nevertheless, the nth-of-type should work, but you’d probably want to target it like this:

.foo-item:first-of-type a {
    background: orange;
}
.foo-item:nth-of-type(2n) a {
    background: green;
}

.foo-item:nth-of-type(3n) a {
    background: green;
}
.foo-item:nth-of-type(4n) a {
    background: orange;
}

I’m hoping to do a little work on this over the holidays. I’ll update this ticket if I get that implemented.

Hi again – I just couldn’t get those pseudos to work at all on the caption backgrounds, even when I linked the images, so I kind of hacked gallery-owl-carousel.php, appending a counter to the foo-item div. It’s not ideal, but it does give me a selector to target that caption background color – foo-item1 .owl-caption; foo-item2 .owl-caption, etc.

Would prefer to be able to use something like the pseudos so it’s more flexible and dynamic to accommodate additional images, but for now, and my 7 little carousel items, it works!