Выберите элемент, исходя из того, сколько у него детей?

Question

У меня есть HTML-код, как это:

<div class="main"></div> 
<div class="span2"> 
    <div><a href="xyz71">List 1</a></div> 
    <div> 
     <ul> 
      <li><a href="xyz71_72">Cat 11</a> 
      </li> 
      <li><a href="xyz71_73">Cat 12</a> 
      </li> 
      <li><a href="xyz71_76">Cat 13</a> 
      </li> 
      <li><a href="xyz71_78">Cat 14</a> 
      </li> 
     </ul> 
    </div> 
</div> 
<div class="span2"> 
    <div><a href="xyz90">List 2</a></div> 
    <div> 
     <ul> 
      <li><a href="xyz90_91">Cat 211</a> 
      </li> 
      <li><a href="xyz90_92">Cat 212</a> 
      </li> 
      <li><a href="xyz90_93">Cat 213</a> 
      </li> 
     </ul> 
    </div> 
    <div> 
     <ul> 
      <li><a href="xyz90_91">Cat 221</a> 
      </li> 
      <li><a href="xyz90_92">Cat 222</a> 
      </li> 
      <li><a href="xyz90_93">Cat 223</a> 
      </li> 
      <li><a href="xyz90_94">Cat 224</a> 
      </li> 
      <li><a href="xyz90_95">Cat 225</a> 
      </li> 
      <li><a href="xyz90_96">Cat 226</a> 
      </li> 
     </ul> 
    </div> 
</div> 

JSFiddle:http://jsfiddle.net/LUJmd/1/

main ДИВ является родителем. Он имеет 2 дочерних div, оба класса span2. Первый span2 div имеет только 2 дочерних элемента. Но второй span2 div имеет 3 дочерних элемента.

Я хочу обнаружить divs внутри main, которые содержат ровно 3 дочерних элемента. Когда такой элемент найден, к этому элементу должна применяться граница. Поэтому в моем коде второй элемент span2 должен получить границу вокруг него.

Для этой цели я нашел следующий код, но я не могу найти способ использовать его здесь.

li:first-child:nth-last-child(3), 
li:first-child:nth-last-child(3) ~ li { 
    width: 33.3333%; 
} 

Источник:Can CSS detect the number of children an element has?

Может кто-нибудь помочь мне с этим?

Answer 1

Это не идеально, но если вы можете установить position: relative; на своих контейнерах div, вы можете использовать псевдоэлементы для этого.

#container > div { 
    position: relative; 
} 
#container > div div:nth-child(3):after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    border: 1px solid #000; 
    z-index: -1; 
} 

Fiddle