Visibility property in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when visibility is set to hidden?

Consider a block element styled with visibility: hidden;. What will you see in the browser?

CSS

<style>div { width: 100px; height: 100px; background: red; visibility: hidden; }</style><div></div>

A The element is invisible but still takes up space on the page.

B The element disappears and the space it occupied collapses.

C The element becomes transparent but can still be clicked.

D The element is removed from the DOM.

💡 Hint

Think about whether the element's space remains reserved or not.

When visibility is set to hidden, the element is not visible but still occupies space in the layout. This differs from display: none; which removes the element from the layout.

📝 Syntax

intermediate

Which CSS rule correctly hides an element but keeps its space?

Select the CSS rule that hides an element visually but preserves its space in the layout.

A display: none;

B visibility: hidden;

C opacity: 0;

D position: absolute; left: -9999px;

💡 Hint

Remember, some properties remove the element from the layout flow.

visibility: hidden; hides the element but keeps its space. display: none; removes it from the layout. opacity: 0; makes it transparent but still visible to events. position: absolute; left: -9999px; moves it off-screen but does not reserve space.

❓ rendering

advanced

What is the visual result of this CSS snippet?

Given the following HTML and CSS, what will you see in the browser?

CSS

<style>p { visibility: collapse; border: 1px solid black; }</style><p>Hello</p>

A The paragraph is invisible but space remains.

B The paragraph is visible with a border.

C The paragraph is hidden and its space collapses like display:none.

D The paragraph text is visible but border is hidden.

💡 Hint

Consider how visibility: collapse; behaves on block elements.

visibility: collapse; on non-table elements like p behaves the same as visibility: hidden;: the element is invisible but still occupies space in the layout. It only collapses space like display: none; for table rows, row groups, columns, and column groups.

❓ selector

advanced

Which CSS selector targets only visible elements?

You want to style only elements that are visible (not hidden by visibility). Which selector works best?

A :is(:not([style*='visibility: hidden']))

B :visible

C :not([hidden])

D :where(:not([style*='visibility: hidden']))

💡 Hint

CSS does not have a native :visible selector, but you can use negation with :where for specificity.

CSS does not support :visible pseudo-class. Using :where(:not([style*='visibility: hidden'])) is a valid way to select elements without inline visibility: hidden. Option D is similar but :where has lower specificity, making it better for overrides.

❓ accessibility

expert

How does visibility: hidden; affect screen readers?

If an element has visibility: hidden;, what is the expected behavior for screen readers?

A Screen readers read the element only if it has ARIA roles.

B Screen readers read the element but do not allow interaction.

C Screen readers still read the element content aloud.

D Screen readers ignore the element completely as if it is not in the DOM.

💡 Hint

Think about how hidden content should be treated for accessibility.

Elements with visibility: hidden; are hidden visually but remain accessible to screen readers, which will read their content aloud. To hide from assistive technologies, use display: none; or aria-hidden="true".