- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display None Using in CSS
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 −
<!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 −
<!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>
Output
This will produce the following output −
- Related Articles
- Display None in CSS
- Differences between CSS display: none; and visibility: hidden;
- Display Property Using in CSS
- Display Block using CSS
- Display Inline using CSS
- Display Inline-Block using CSS
- Changing the Default Display Value using CSS
- Display an Icon from Image Sprite using CSS
- Who to Change the Default Display Value using CSS
- CSS Visibility vs Display
- Working with Display Block in CSS
- How to display columns and rows using named CSS grid items
- Working with CSS Display Property
- Display Inline Working with CSS
- Difference Between CSS Display and Visibility

Advertisements