fullcalendar past month container styling

Question

I try to style fullcalendar past month container to fill with the background color, I style the date, head by CSS works fine, but just this one won't work. I use chrome inspect to see the HTML tag, and change style in CSS, it won't show up, please help. Thanks!

// Here's the HTML tag //

<td class="fc-day fc-widget-content fc-mon fc-other-month fc-past" 
data-date="2017-10-30"></td>

// My CSS //

.fc-day .fc-widget-content .fc-other-month .fc-past {
background: orange !important;}

Thank you all.

Answer 1

Got it. You are using this CSS:

.fc-day .fc-widget-content .fc-other-month .fc-past {}

... but that means .fc-past inside .fc-other-month inside .fc-widget-content inside .fc-day.

However because your html has all those classes on the one element, you need to have a selector that says "match all these":

.fc-day.fc-widget-content.fc-other-month.fc-past {}

But really, you could just select one of them. Over-specificity is never a good thing.