Css:- empty selector

    The :empty selector matches every element that has no children. 
    Comments or processing instructions do not affect whether an element is considered empty or not.

Code:-


<!DOCTYPE html> 
<html> 
<head> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <style> 
  div:empty { 
   width: 100px; 
   height: 100px; 
   border: 2px solid black; 
   background-color: green; 
  } 
   
  div:not(:empty) { 
   width: 100px; 
   height: 100px; 
   border: 2px solid yellow; 
   background-color: red; 
  } 
 </style> 
</head> 
<body> 
 <div> 
  Have content 
 </div> 
 <!--The following div not Empty div because empty space are there--> 
 <div> 
 </div> 
 <!--The following div is empty div--> 
 <div></div> 
 <!--The following div is also empty div, because the comments are not consider--> 
 <div> 
  <!--This is empty div--> 
 </div> 
</body> 
</html>
Css:- empty selector Css:- empty selector Reviewed by Network security on May 23, 2019 Rating: 5

No comments:

Useful Information

Powered by Blogger.