Unable to see .DayPicker-Day--start or --end on divs

Describe the bug I am trying to style the start and end selected dates for a range differently than the others in the range. However, when I inspect the DatePicker using chrome dev tools, I only see DatePicker-Day--selected on the beginning and end dates and no --start or --end classes, so my custom styles will not apply. There does not seem to be any distinguishing elements in the classnames.

Expected behavior .DatePicker-Day--start and .DatePicker-Day--end to be applied to the start and end of range of dates.

[razh]

@darkLord19 In the codebase I’m working on, we increase the specificity by targeting the days that can be selected. So given:

https://github.com/gpbl/react-day-picker/blob/750f6cd808b2ac29772c8df5c497a66e818080e8/src/style.css#L179-L184

We could have something like this (using Sass nesting):

.DayPicker-Day:not(.DayPicker-Day--outside) {
  &.DayPicker-Day--start {
    background-color: tomato;
  }

  &.DayPicker-Day--end {
    background-color: rebeccapurple;
  }
}

The --outside modifier refers to days outside of the current month:

https://github.com/gpbl/react-day-picker/blob/750f6cd808b2ac29772c8df5c497a66e818080e8/src/Month.js#L87

[darkLord19]

@razh thank you so much. I was able to achieve desired behavior using this method!