Selector for an element with certain class, if it is the one & only child of its parent?

Question

I want to apply certain CSS to an element(with a certain class) if it is the one & only child within its parent. I can easily do this using jQuery but I'm looking for a pure CSS solution(that works across all major browsers). How do write selector expression for such elements ?

E.g. scenario:

<div> 
   <span class='a1'/>
</div>

<div> 
   <a>random text</a>
   <span class='a1'/>
</div>

I would like the first div contained .a1 element to be selected as it is the only element within its parent.

Answer 1

Use .a1:only-child see this fiddle. Of course, it depends on what you consider "major browsers" as to whether it is supported or not (it is a CSS3 property).