Display None Using in CSS

CSS Web Development Front End Technology

CSS Display None helps developer to hide the element with display property set to none. For element whose display is set to none no boxes are generated for it and even its child elements which might have display set to values other than none.

Syntax

Following is the syntax for CSS display none −

Selector {
   display: none;
}

Example

Let’s see an example of CSS display none −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>CSS Display None</title>
<style>
form {
   width:70%;
   margin: 0 auto;
      text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
input[type="button"] {
   border-radius: 10px;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-None</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="displayNone()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function displayNone(){
   for(var i=0; i<3; i++)
   primaryColor[i].style.display = 'none';
}
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Hide Primary Colors’ button −

After clicking ‘Hide Primary Colors’ button −

Example

Let’s see another example of CSS Display None −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#flex {
   display: flex;
}
#none {
   display: none;
}
.inline-block {
   display: inline-block;
   background-color: mintcream;
}
.grid {
   display: grid;
   background-color: orange;
}
div {
   margin: 50px;
   padding: 10px;
   height: 10px;
   line-height: 5px;
   text-align: center;
   background-color: red;
   border: 2px solid blue;
}
div > div {
   background-color: yellow;
   border: 2px solid green;
}
div > div > div {
   background-color: sandybrown;
   border: 4px solid darkred;
}
</style>
</head>
<body>
<div><span id="flex">AAAAAA</span>
<div><span id="none">BBBBBB</span>
<div>
<span class="inline-block">CCCCC</span>
<span class="inline-block">DDDDD</span>
<div>
<span class="grid">EEEE FFFF</span>
<span class="grid">GGGG HHHH</span>
</div>
</div>
</div>
</div>
</body>
</html>