Remove Bottom Border Of Last Event

Hi,

Use the :last-of-type selector. For widget this works:

.vsel-widget #vsel .vsel-content:last-of-type {padding:0; border-bottom:none;}

Proper use of this selector is to target a certain HTML tag (such as p or li) but this also works.

Guido

Since I am not using widget but the shortcode

[vsel posts_per_page="10"]

I tried it with

#vsel .vsel-content:last-of-type {padding:0; border-bottom:none;}

but unfortunately this doesn′t work.

Hi,

Try this:

#vsel div.vsel-content:nth-of-type(0n+4) {padding:0; border-bottom:none;}

In this example the fourth event in the list is targeted. If your event list is longer, change that number to the last one in your list.

Guido

Thanks, it works.
But since my event list doesn′t always have the same number of events, this solution is not applicable for me.

The maximum is set to 10 events but when there are less events in the future, it displays fewer events. Then this solution won′t deliver the result I′m looking for.

Meanwhile I changed the design to disable the bottom border and enabled a top border above every listing. This is good enough for me. ??

Thank′s again for the plugin and the support!

Cheers!

Hi,

That’s also possible.
But tested the CSS fix of my first reply again and it should work.

More specific, to target the last div in list with class vsel-content this works over here:

#vsel div.vsel-content:last-of-type {padding:0; border-bottom:none;}

(have added this at the Extra CSS page of the Customizer in my dashboard)

Guido