Target only events before Month/Time Separators

[Sean]

Hi,

I’m trying to remove the bottom border of the single events (#tribe-events .tribe-events-list .type-tribe_events) in the calendar views (e.g. List View) for the events that are immediately followed by either the Month Separator (.tribe-events-list-separator-month) or the Time Slot (.tribe-events-day-time-slot). I believe that element+element only targets elements aftera certain element, which doesn’t seem that it would work here since I am trying to select only the events are just before the separators (such as .tribe-events-list-separator-month in List View).

Is there another selector that would enable selecting events before the Month/Time Slot separators?

[Brook]

Howdy again Karly,

There is not preceding sibling selector in CSS. But, if you ask me the joy of CSS is finding workarounds to these sorts of things. 😀

Right now you have a margin below each post:

#tribe-events .tribe-events-list .type-tribe_events{ margin-bottom: 5px }

And you also have a margin on top of the seperator:

.tribe-events-list-separator-month { margin: 0.75em auto 0.5em; }

What if you made the post margin on top instead on bottom? Then made the separator top margin -2px. This will cover over you bottom border. However, if things are looking a bit crowded, you could then add a white top border to the seperator to fake a margin between it and the preceding post. The white border will still cover over the other seperator.

Other than tricky CSS, your only option would be writing some PHP to add a CSS class to the last element before a separator, or using jQuery. Something like this ought to do it:

jQuery('span.tribe-events-list-separator-month').prev().addClass('post-before-seperator')

Does that all make sense? Cheers!

– Brook

[Sean]

Hello again 🙂

Thanks so much for this suggestion. It got me started down the right path and I was able to target the desired events/posts. Enjoy your evening!

Best,
Karly

[Brook]

Wonderful! My pleasure.

• Brook

[Author]

Posts