Only-child selector in CSS3

How to select the element that has only child of its parent element in CSS3?

By using only-child selector we can select element that has only child of its parent element.

<style>
        p:only-child {
            background-color: lightblue;
            color: blue;
        }
</style>

<body>
    <p>This is the normal element</p>
    <div>
    <p>The only Child of div parent.</p>
    </div>
    <div>
    <p>The first child of div parent.</p>
    <p>The second child of div parent.</p>
    </div>
</body>

In the above code snippet we have given style to the only-child selector. So, that it will select the element that has only child of its parent element and applies the given style.

OUTPUT

Views: 3247 | Post Order: 31

CSS3 > Selectors

Only-child selector in CSS3

How to select the element that has only child of its parent element in CSS3?

Related Posts

Utility Tools