Селектор CSS для создания стиля CSS, если у родителя есть один дочерний элемент, а другой - для двух дочерних.

Question

Можно ли использовать чистые селекторы CSS, чтобы дать дочерним узлам (в моем случае UL) различные свойства, в частности высоту, в зависимости от количества братьев и сестер, которые есть у дочернего элемента?

Например, еслиузел имеет 1 дочерний элемент, высота UL является автоматической, однако, если узел имеет 2 дочерних элементов, то рост этих дочерних элементов скажем «200px»?

Answer 1

Вы ищете:

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

ul li {
     height: 200px;
}

ul li:only-child {
     height: auto;
}

Следует отметить, что only-child поддерживается во всех браузерах, кроме IE8 и старше. http://reference.sitepoint.com/css/pseudoclass-onlychild

Answer 2

Я не совсем уверен в совместимости браузера, но

ul li:first-child:last-child {
     height: auto;
}

Работает так же хорошо, и в конце концов, очень много смысла :)

Answer 3

Предполагая, что причина вопроса в том, что ваши UL генерируются динамически, вы можете использовать один и тот же код для определения уникальных идентификаторов для этих UL, чтобы CSS можно было применять правильно

Answer 4

CSS не является логическим языком.Вы не можете использовать логику "если это сделает это".Поэтому вы должны использовать jQuery для этой практики.

---

РЕДАКТИРОВАТЬ

Вот ваш необходимый код

 var liCount = $("ul li").size();  // How many list items UL' have

 var constant = 10;   // Constant px Value for calculate new pixel.

 $("ul li").css("height",constant*liCount);  //Css manipulation

 $(".result").html(constant*liCount+"px is the li's height");  // what is the result

 <ul>
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
    <li>Fourth List Item</li>
 </ul>

Вы можете проверить это в jsfiddle (я определил высотуjQuery для просмотра изменений)

http://jsfiddle.net/guJBt/1/