CODEWITHSUNDEEP
selectorchildren
Adam Carter
Adam Carter

Reputation: 4844

CSS selector to create a CSS style if a parent has one child, and a different one for two children

Is it possible to use pure CSS selectors to give a nodes children (in my case ULs) different properties, in particular height, based on the amount of siblings the child have?

For example, if a node has 1 child, the height of the UL is automatic, however if the node has 2 children, then those children's height is say '200px'?

Upvotes: 2

Views: 3621

Answers (4)

Robin Castlin
Robin Castlin

Reputation: 10996

I'm not fully sure about browser compability, but 

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

Works aswell and in the end, makes a whole lot of sence :)

Upvotes: 6

İlker Korkut
İlker Korkut

Reputation: 3250

CSS is not a logical language. You can't use "if this do that" logic. So you should use jQuery for this practice.

EDIT

Here is your required code

 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>

You can test this in jsfiddle (i defined height in jquery for seeing changes)

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

Upvotes: 0

user1139063
user1139063

Reputation:

Assuming that the reason of the question is that your UL's are generated dynamically you can use the same code to define an unique ID's to those UL's so the CSS can be applied properly

Upvotes: 0

Brian Mathews
Brian Mathews

Reputation: 692

Are you looking for:

If the list item is the only child, its height will be auto. If there are multiple list items, the list items will all have a height of 200px.

ul li {
     height: 200px;
}

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

Just to note, only-child is supported on all browsers except for IE8 and older. http://reference.sitepoint.com/css/pseudoclass-onlychild

Upvotes: 7

Related Questions