I am trying to target a single div with a specific class using the only-child pseudo-selector. I attempted the following approach:
.foo .bar:only-child {
background-color: red;
}<div class="foo">
<div>1</div>
<div class="bar">2</div>
<div>3</div>
</div>Unfortunately, this method did not yield the desired result. Is it possible to use only-child with classes or is it restricted to HTML element types?
Solution:
After some exploration, I discovered a solution. Even though it was flagged as a duplicate (which I disagree with), I will share it here:
.foo bar:only-of-type {
background-color: red;
}<div class="foo">
<div>1</div>
<bar>2</bar>
<div>3</div>
</div>