I need to target an element with a specific class and apply CSS only if it is the sole child within its parent. While jQuery can achieve this easily, I am seeking a pure CSS solution that is compatible across all major browsers. How can I write a selector expression for these elements?
For example:
<div>
<span class='a1'/>
</div>
<div>
<a>random text</a>
<span class='a1'/>
</div>
In the above scenario, I want to select the first div containing the .a1 element because it is the only child within its parent.