Trying to implement a style

[designtrooper]

I have this calendar here

I am trying to set the color property for the days which have the past class(days that belong to previous dates)…I tried to do that with the rule in line 115. It does not work cause it is overwritten by the rule in line 56.

How to solve this…I tried being more specific:

#calendar .clndr-grid .days .day .past {color: #FF0000;}

But the above does not even show up in dev tools…as if though it was not parsed at all.

So…what to try next?

[PaulOB]

.past is not a descendant of .day as it is the same element. You need to say this:

#calendar .clndr-grid .days .day.past {color: #FF0000;}

This is the problem with this over specific method of naming rules. You should have kept it simper and use single classes only as you don;t need the full path in most cases (or at least if prepared properly).

In cases like this I tend to simply say.

.past {color: #FF0000!important;}

Of course over-use of important is also considered very bad but given the choice of using a rule with 10 selectors before it I would choose important.

However the best approach would have been not to have used the id at all and just use single classes to style the elements. There may be the odd case where you need 2 or more selectors but if you generally keep specificity low the whole thing becomes much easier and much much quicker for the browsers to parse.