Как добавить CSS, если элемент имеет более одного ребенка?

Ответ 1

Вы не можете напрямую "подсчитывать" общее количество элементов в CSS, поэтому нет возможности применять класс только в том случае, если есть 2 или более divs (для этого вам понадобится JavaScript).

Но возможным обходным путем является применение класса ко всем div в td...

td > div {
    margin-bottom: 10px;
}

... и затем переопределить/отключить его с другим стилем, когда есть только один элемент. Это косвенно позволяет добавить стиль, когда есть еще два дочерних элемента.

td > div:only-child {
    margin-bottom: 0px;
}

В качестве альтернативы вы можете применить к каждому div после первого, если это произойдет для вашей ситуации.

td > div:not(:first-child) {
    margin-bottom: 10px;
}

Изменить: Или, как говорит Итай в комментарии, используйте селектор sibling

td > div + div {
    margin-bottom: 10px;
}

Ответ 2

Ну, на самом деле вы можете сделать это с помощью css с помощью селектора nth-last-child

FIDDLE

Итак, если ваша разметка была такой:

<table>
<td>
   <div class='test'>test</div>
   <div class='test'>test</div>
</td>
</table>

<hr />

<table>
<td>
   <div class='test'>test</div>  
</td>

</table>

CSS

div:nth-last-child(n+2) ~ div:last-child{
    margin-bottom: 40px;
}

... приведенный выше css будет стилизовать последний элемент div только в том случае, если существует контейнер, который содержит не менее двух дочерних div

Просто, чтобы увидеть, как это работает лучше - вот еще пример скрипки

Ответ 3

td > div:not(:only-child) { margin-bottom: 10px; }

Ответ 4

Я думаю, что нет возможности добавить маркер 10px к каждому div внутри td без использования css3.

поэтому было бы использовать javascript и проверить, есть ли более 1 div внутри td, а затем, если да, добавьте специальный класс.

CSS

.myMarginClass div{
 margin-bottom:10px;
}

JS

var td=document.getElementsByTagName('td'),
l=td.length;
while(l--){
 if(td[l].getElementsByTagName('div').length>1){
  td[l].className='myMarginClass';
 }
}

else для современных браузеров правильным решением является :only-child предложенный @mikel

Ответ 5

сделал приятный небольшой комбо с принятым ответом

применяет стиль только к первому ребенку, когда его НЕ единственный ребенок.. поэтому, когда есть более 1

td > div:not(:only-child):first-child { }

Ответ 6

здесь вы идете:

td:not(:has(div:first-child:last-child))

бонус

td:not(:has(div:only-child))

Ответ 7

Вы можете использовать свойство flex-shrink Flexbox для достижения желаемых результатов. Просто добавьте это в свой CSS и все должно получиться, как и ожидалось.

.col-xl-2 {
  flex-shrink: 2;
}

.col-xl-2:first-child + .col-xl-2:last-child {
  flex-shrink: 1;
}