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

Question

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

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

Answer 1

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

---

EDIT

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

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/

Answer 2

Вы ищете:

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

ul li { 
    height: 200px; 
} 

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

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

Answer 3

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

Answer 4

Я не в полной мере уверен браузер Compability, но

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

работа как хорошо и в конце концов, делает целую кучу :)

чувства