0

Нужно обратиться к последнему дочернему элементу table первого уровня, т.е. к последнему div первого уровня (черного цвета), внутренние блоки серого цвета не должны меняться. Количество дочерних блоков с под-блоками может меняться. Пробовал добавить класс последнему элементу с помощью jquery, не выходит, выбираются все последние серые дочки, то же самое и с CSS. Пробовал другие разные вариации и манипуляции с last-child, но нужного результата так и не смог получить. Помогите решить задачу

$('#table div:last-child').addClass('test');
*{
  margin: 0;
  padding: 0; 
}
#table > div{
  display: block;
  box-sizing: border-box;
  background: #000;
  width: 50%;
  padding: 5px;
  margin-bottom:5px ;
  
}

#table > div > div{
  display: block;
  box-sizing: border-box;
  background: #555;
  height: 50px;
 margin: 5px;
}

/* #table div:last-child{
  background: green;
}*/

/*.test {
  background: green!important;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="table">
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

1
  • почитайте про ">" в названиях стилей
    – Lapapa
    20 авг 2017 в 18:05

1 ответ 1

1

Нужно добавить > для непосредственных потомков

$('#table > div:last-child').addClass('test');

Без > скрипт добавлял класс для всех последних div внутри #table

3
  • Пробовал, красится последний серый под-блок, а нужно последний черный. 20 авг 2017 в 18:23
  • 1
    @Евгений, вроде работает как надо jsfiddle.net/monobit/syy32f0t/1
    – Dmitry B.
    20 авг 2017 в 18:27
  • работает, спасибо! 20 авг 2017 в 18:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.