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

Question

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

0

У меня есть 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 div - родительский. Он имеет 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%;
}

Источник: может ли CSS определить количество детей, которые имеет элемент?

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

Ahmad 22 сен. 2013, в 18:52

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Chad · Answer 1 · 2013-09-22T14-44-00.000Z

Это не идеально, но если вы можете установить 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;
}

скрипка

Я не могу сделать это, к сожалению. Его фиксированное position: absolute в моем случае.
@ Ахмад Если ты покажешь мне больше своего кода, я могу попытаться помочь тебе.