Use CSS revert to Restore display

This educational demo shows why display: block is not always the right way to reveal hidden elements, and how display: revert restores the browser's natural display behavior.

1. Hide every list item after the third

The requirement starts with a small rule: show only the first three options by default.

Code: 
#setupList li:nth-child(n+4) {
  display: none;
}
Result:
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5

Options 4 and 5 exist in the HTML, but the CSS rule hides them.

2. Revealing list items with display: block removes markers

A common first attempt is to set the hidden list items to block. The items appear, but they are no longer rendered as list items.

Code: 
#blockList li:nth-child(n+4) {
  display: none;
}

const showBlockItems = () => {
  document.querySelectorAll('#blockList li:nth-child(n+4)').forEach((li) => {
    li.style.display = 'block';
  });
};
Result:
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Hidden items use display: none

3. Revealing list items with display: revert restores markers

The default computed display value of an <li> is list-item, not block. revert asks the browser to return to its built-in behavior.

Code: 
#revertList li:nth-child(n+4) {
  display: none;
}

const showRevertItems = () => {
  document.querySelectorAll('#revertList li:nth-child(n+4)').forEach((li) => {
    li.style.display = 'revert';
  });
};
Result:
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
Hidden items use display: none

4. Compare different display values on list items

Try each value. list-item and revert keep bullet markers because the elements render as list items.

Code: 
#compareList li:nth-child(n+4) {
  display: none;
}

displayChoice.addEventListener('change', () => {
  document.querySelectorAll('#compareList li:nth-child(n+4)').forEach((li) => {
    li.style.display = displayChoice.value;
  });
});
Result:
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
display: none

5. Use all: revert to restore native controls

The all property applies a keyword to every CSS property. Here, the second button and second progress bar return to the browser's native styling.

Code: 
.pretty-button {
  padding: 12px 18px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #0f766e);
  color: white;
  font-weight: 800;
}

.plain-button,
.native-progress {
  all: revert;
}
Result:

Styled controls

68%

Reverted controls

68%

6. Show mixed elements with display: revert

For tabs, accordions, and shared components, revert lets each tag return to its own default display value.

Code: 
.toggle-demo [data-panel] {
  display: none;
}

togglePanelsButton.addEventListener('click', () => {
  document.querySelectorAll('.toggle-demo [data-panel]').forEach((panel) => {
    panel.style.display = panel.style.display === 'revert' ? 'none' : 'revert';
  });
});
Result:
Span panel: I return as inline text.
Div panel: I return as a block.

Paragraph panel: I return as a block paragraph.

Tag Default display
<table> table
Panels are hidden

7. Compare global CSS keywords

The other global keywords are useful too, but they do different things. This example applies each keyword to the target box's color.

Code: 
keywordChoice.addEventListener('change', () => {
  keywordTarget.style.color = keywordChoice.value;
  keywordStatus.textContent = 'color: ' + keywordChoice.value;
});
Result:
Parent text color is teal.
Target text starts red.
color: #b91c1c
Keyword value Practicality Compatibility Overall rating
inherit A A+ A+
initial B- B+ B
unset B- B- B-
revert B C B-