p:only-child { color:red; } <div> <p>This paragraph is the only child of its parent</p> </div> <div> <p>This paragraph is the first child of its parent</p> <p>This paragraph is the second child of its parent</p> </div>
This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent
We could also mixin additonal pseudo classes like this example that selects the first paragraph within our nested div and the only-child of div.contain.
div.contain div:only-child :first-child { color: red; } <div class="contain"> <div> <p>Hello World</p> <p>some more children</p> </div> </div>
Hello World
some more children