0

I don't understand why i can't select the first element with class ".adjacent-month" in my cal-week-5 div. (To make a left border on the last day)

http://jsfiddle.net/qqLcyt1h/

HTML : 

        <div class=" week cal-week-5">
            <div class="day past calendar-day-2015-03-30 calendar-dow-0">30
                <div class=" value val-30"></div>
            </div>
            <div class="day past calendar-day-2015-03-31 calendar-dow-1">31
                <div class=" value val-31"></div>
            </div>
            <div class="day past adjacent-month next-month calendar-day-2015-04-01 calendar-dow-2">1
                <div class=" value val-1"></div>
            </div>
        </div>
Anti
  • 37
  • 7

2 Answers2

1

Two problems.

.cal-week-5 .day .adjacent-month:first-child .value

1) The cell has both the .day and the .adjacent-month classes, so this will never work.

.cal-week-5 .day.adjacent-month:first-child .value

2) The :first-child only applies to the first child of the parent element, so this would only fire if the day was the first day of the 5th week.

There's some experimental options for selecting first of types. You can read more here: CSS selector for first element with class

However, I'd suggest modifying your code to add a new class to the first cell. It's a lot easier and more cross-browser compatible. If you don't care about older browsers, you can look at the fancy CSS3 tools.

Community
  • 1
  • 1
Josh
  • 3,258
  • 2
  • 19
  • 31
  • Thank you ! Add a new class to the first adjacent-month cell ? And when you're talking avout fancy CSS3 tools, you mean Advanced Selectors ? – Anti Apr 09 '15 at 13:50
  • @Anti Yes. Older browsers, particularly Internet Explorer, will not support as many `:selectors` as you'd like, so be careful. I'd suggest adding a new class, like `first-of-next-month`, and applying styles to that directly. – Josh Apr 09 '15 at 13:54
0

As noted by Jaw.sh, you would need to remove the .day part of the selector. However, your biggest miscomprehension probably comes from the :first-child selector itself.

As explained in the reference, the :first-child selector “Matches element E when E is the first child of its parent.”.

This means that .day .adjacent-month:first-child matches any element with class adjacent-month that is at some level below an element with class day and that is the first child of its immediate parent.

For instance, this would be matched:

<div class="day">
    <ul>
        <li class="adjacent-month">First child</li>
        <li class="adjacent-month">Second child</li>
    </ul>
</div>

What you probably want here is something like 

.cal-week-5 :not([class*=adjacent-month]) + .adjacent-month .value

documented here and which should be pretty well supported.

IdoO2
  • 1