Sử dụng Display None trong CSS

CSS display: none giúp nhà phát triển ẩn phần tử bằng cách đặt thuộc tính display thành none. Đối với phần tử có display là none, không có hộp (boxes) nào được tạo ra cho nó, và cả các phần tử con của nó (dù có display khác none) cũng không được tạo hộp.

Cú pháp

Selector {
  display: none;
}

Ví dụ 1: Ẩn các màu chính (primary colors)

<!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>

Kết quả

Trước khi nhấn 'Hide Primary Colors':

Sau khi nhấn 'Hide Primary Colors':

Ví dụ 2: Display none trong nested structure

<!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>

Kết quả

Lưu ý quan trọng: Khi phần tử cha có display: none, tất cả phần tử con cũng sẽ không được render, bất kể chúng có display: block, flex, grid, hay bất kỳ giá trị nào khác. Đây khác với visibility: hidden nơi con có thể ghi đè bằng visibility: visible.

Ứng dụng phổ biến:

• Dropdown menu, modal, tooltip (ẩn/hiện bằng JS)
• Responsive design (ẩn phần tử trên mobile/desktop)
• Skip links cho accessibility
• Print stylesheet (ẩn nav, sidebar khi in)