: селектор с первым ребенком не работает?

Я не понимаю, почему я не могу выбрать первый элемент с классом «.adjacent-month» в моей div-неделе -5. (Для того, чтобы сделать левую границу в последний день): селектор с первым ребенком не работает?

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>

источник

2015-04-09 Anti

Две проблемы.

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

1) Ячейка имеет как.day и .adjacent-month классы, так что это никогда не будет работать.

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

2) :first-child относится только к первому ребенку родительского элемента, так что это будет только огонь, если день был первый день 5-й неделе.

Есть несколько экспериментальных вариантов выбора первых типов. Вы можете узнать больше здесь: CSS selector for first element with class

Однако, я предлагаю изменить код, чтобы добавить новый класс в первую ячейку. Это намного проще и совместимо с несколькими браузерами. Если вам не нравятся старые браузеры, вы можете посмотреть на причудливые инструменты CSS3.

источник

2015-04-09 13:38:49 Josh

Спасибо! Добавить новый класс в первую ячейку соседа? И когда вы говорите об утилите CSS3, вы имеете в виду Advanced Selectors? – Anti

@ Anti Да. Старые браузеры, особенно Internet Explorer, не будут поддерживать столько «селекторов», сколько захотите, поэтому будьте осторожны. Я бы предложил добавить новый класс, например, 'first-the-next-month', и применить стили к этому напрямую. – Josh

Как отмечено Jaw.sh, вам необходимо удалить часть селектора .day. Однако ваше самое большое недоразумение, вероятно, исходит от селектора :first-child.

Как поясняется в reference, селектор :first-child «Соответствует элементу E, когда E является первым дочерним элементом его родительского элемента».

Это означает, что .day .adjacent-month:first-child соответствует любому элементу с классом adjacent-month, который находится на некотором уровне ниже элемента с классом day, и это первый ребенок его непосредственного родителя.

Например, это будет соответствовать:

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

То, что вы, вероятно, хотите здесь что-то вроде

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

документально here и которые должны быть очень хорошо поддерживается.

источник

2015-04-09 14:47:32 IdoO2

: селектор с первым ребенком не работает?

ответ

Смежные вопросы