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

Question

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'?

Answer 1

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