Open In App

CSS :empty Selector

Last Updated : 03 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The: empty selector is used to select that element that does not contain any children (including text node). 

Syntax:

:empty {
/* CSS property */
}

Example: In this example, we are using the above-explained selector.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>empty selector</title>
    <style>
        h1 {
            color: green;
        }
 
        div:empty {
            width: 150px;
            height: 20px;
            background: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>:empty selector</h2>
        <div></div><br>
        <div>A computer science portal for geeks</div>
    </center>
</body>
 
</html>


Output: 

 

Supported Browsers: 

  • Apple Safari 3.1 and above
  • Google Chrome 1.0 and above
  • Edge 12.0  and above
  • Firefox 1.0 and above
  • Opera 9.5 and above

Previous Article
Next Article

Similar Reads

jQuery :empty Selector
The :empty selector in jQuery is used to select empty elements. Syntax: $(":empty")Parameter: The :empty selector contains a single parameter empty which is mandatory and used to select an empty element which is an element without child elements or text. Example 1: This example uses :empty selector to select an element position in a table. C/C++ Co
2 min read
CSS :root Selector
The :root selector is used to select all the elements of an HTML Document. This selector covers all the HTML elements or tags. Syntax: :root { // CSS property} Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;root selector&lt;/title&gt; &lt;style&gt; h1 { color: White; } :root { background: green; } body { text-align
1 min read
CSS :not Selector
The :not(selector) selector is used to style every element that is not the specified by selector. Since it prevents specific items from being selected, it is also known as the negation pseudo-class. Syntax: :not(selector) { //CSS Property } Example-1: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title
1 min read
CSS :enabled Selector
The :enabled selector is used to set the background color in enabled element in a form. Syntax: :enabled { //property } Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style&amp;gt; input[type=text]:enabled { background: limegreen; } input[type=text]:disabled { background: silver; } &amp;lt;/style
1 min read
CSS :only-of-type Selector
The :only-of-type selector in CSS represents only those elements that have no siblings of the given type. It is used to set the CSS property to that element. Syntax: :only-of-type { // CSS property } Example 1: In this example, we are using the above-explained selector. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;:only-o
1 min read
CSS element Selector
The element selector in CSS is used to select HTML elements that are required to be styled. In a selector declaration, there is the name of the HTML element and the CSS properties which are to be applied to that element is written inside the brackets {}. Syntax: element { \\ CSS property } Example 1: This example shows the element selector in CSS.
1 min read
CSS :checked Selector
The checked selector is used to select all checked elements in the input tag and radio buttons. This selector is used with radio buttons, checkbox and option elements. Syntax: :checked { // CSS property} Example 1: In this example, The CSS :checked selector targets checked input elements. It sets a height and width for checked checkboxes and applie
2 min read
What does the “+” (plus sign) CSS selector mean?
The "+" sign selector is used to select the elements that are placed immediately after the specified element but not inside the particular elements. Note: The IE8 and earlier versions &lt;/DOCTYPE&gt; must be declared to work element + element selector. Syntax: element + element { // CSS property } Example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;he
1 min read
How to use a not:first-child selector in CSS?
This selector is used to select every element which is not the first-child of its parent element. It is represented as an argument in the form of :not(first-child) element. Syntax: :not( element ) { // CSS property } Example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;not first child selector&lt;/title&gt; &lt;style&gt; h1 { color
1 min read
CSS :in-range Selector
The :in-range selector is used to selecting all elements that are given within a particular range value. It is mostly used in an input element with the type min/max attribute. Syntax: :in-range { // CSS property} Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;in range selector&lt;/title&gt; &lt;style&gt; h1 { color
1 min read