Empty selector in CSS3

How to represent the element that has no children in CSS3?

By using Empty selector we can represent the element that has no children.

<style>
        div:empty {
            color: green;
            background-color: pink;
            height: 20px;
            width: 50px;
        }
</style>

<body>
    <p>This is Paragrapgh with content.</p>
    <br />
    <div>This is Div with content.</div>
    <br />
    <div></div>
    <br />
    <b>This is Bold content.</b>
</body>

In the above code snippet, style is applied to the highlighted <div> tag.

OUTPUT