[Resolved] Applying a CSS class to a View Loop

[Author]

Posts

[russellH-3]

Tell us what you are trying to do?
Apply a background color to a View block on a Content Template, but not a second View block in the same template. Because these two blocks have the same CSS classes, it's hard to pinpoint one in my stylesheet.

When I go to the Content Template and try to edit the View, there's no Advanced sidebar panel in which to apply a custom CSS class. There is a 'Custom CSS and JS' panel, but when I write in 'background-color: #4B4B4B;' it seems to have no effect.

These two View blocks have unique IDs, but this ID will change on each page where my Content Template is used; so using the ID doesn't seem to be a solution.

Is there any documentation that you are following?
No

Is there a similar example that we can see?
Front end page where the Content Template and 2 View blocks are is here:
hidden link

The View blocks are the boxes with grey backgrounds. I'd like only the top one to have that grey background. The CSS rule I'm using is:

.graduate .js-wpv-loop-wrapper {
background-color: #4B4B4B;
}

What is the link to your site?
hidden link

Thanks!

[Shane]

Hi Russel,

Thank you for getting in touch.

You should be able to use the nth-child selector to resolve this.
hidden link

Try the following.

.js-wpv-loop-wrapper:nth-child(1){
background-color: #4B4B4B;

}

Please let me know if this helps.

Thanks,
Shane

[russellH-3]

Hey Shane:

Ah, I didn't think of using :nth-child. Good suggestion. I did apply that rule, however, and it's still not working. I think it's because I have two separate View blocks so each of them contain a .js-wpv-loop-wrapper that would be considered the first one within them.

I've tried other variations to pinpoint that first View block:

.graduate .js-wpv-view-layout:nth-child(1) .js-wpv-loop-wrapper {
background-color: #4B4B4B;
}

.graduate .js-wpv-view-layout:nth-child(1)>.js-wpv-loop-wrapper {
background-color: #4B4B4B;
}

and

.graduate .js-wpv-view-layout:nth-child(1)>.js-wpv-loop-wrapper:nth-child(1) {
background-color: #4B4B4B;
}

… but no luck. The two blocks are still both grey, as before:

hidden link

Is there any other way to write that CSS rule? Thanks for your help so far.

Kind regards, Russell

[Shane]

Hi Russell,

There is also the first-of-type selector that you can make use of.
hidden link

This one works without having to be in a shared div, so it should just target the first instance of the class . Also remember that the .js-wpv-loop-wrapper is shared by both views, so if you add the

Please let me know if this helps.

Thanks,
Shane

[russellH-3]

Thanks Shane:

I didn't know about first-of-type, so that's handy to have. I tried and a number of variations but it didn't work. I ended up putting the second View block in a Group block, and gave that Group block a CSS class. That helped create the hook I needed to fix my issue.

But thanks for all your help and have a good weekend.

Kind regards, Russell