How to add CSS if element has more than one child?

Question

I have td tags and a several div inside td:

   

   


        
                      

              相关标签:
       
      

Answer 1

here you go:

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

bonus

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

Answer 2

did a nice little combo with the accepted answer

only applies style to the first child when its NOT the only child.. so when there is more than 1

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

Answer 3

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

Answer 4

i think there is no way to add the 10px margin to each div inside a td without the use of css3.

so a solution would be to use javascript and check if there are more than 1 div's inside the td and then if yes add a special class.

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 for modern browsers the proper solution is the :only-child proposed by @mikel

Answer 5

You can't directly 'count' total numbers of elements in CSS, so there's no way to only apply the class if there's 2 or more divs (you'd need JavaScript for that).

But a possible workaround is to apply the class to all divs in the td...

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

... and then override/disable it with a different style when there's only one element. That indirectly lets you add the style when there's 2+ more child elements.

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

Alternatively you can apply to every div after the first one, if that happens to work for your situation.

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

Edit: Or as Itay says in the comment, use a sibling selector

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

Answer 6

Well actually you can do this with css using the nth-last-child selector

FIDDLE

So if your markup was like this:

<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;
}

... the above css will style the last div element only if there exists a container that has at least 2 child divs

Just to see how this works better - here's another example fiddle