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".

Practice

1. What does the CSS property visibility: hidden; do to an element on a webpage?

easy

A. It makes the element transparent but still clickable.

B. It hides the element but keeps its space reserved on the page.

C. It removes the element completely from the page layout.

D. It changes the element's color to match the background.

Solution

1. Step 1: Understand the visibility property

   The visibility property controls whether an element is visible or hidden but does not affect layout space.

2. Step 2: Analyze the effect of hidden

   When set to hidden, the element is not shown but still occupies space on the page.

3. Final Answer:

   It hides the element but keeps its space reserved on the page. -> Option B

4. Quick Check:

   visibility: hidden hides but keeps space [OK]

Hint: Hidden keeps space, display none removes it [OK]

Common Mistakes:

• Confusing visibility: hidden with display: none
• Thinking hidden elements are clickable
• Assuming hidden elements disappear completely

2. Which of the following is the correct CSS syntax to hide an element but keep its space using the visibility property?

easy

A. visibility: hidden;

B. visibility = hidden;

C. visible: hidden;

D. hide: visibility;

Solution

1. Step 1: Recall correct CSS property syntax

   CSS properties use a colon : between property and value, ending with a semicolon.

2. Step 2: Match syntax to visibility property

   The correct syntax is visibility: hidden; to hide but keep space.

3. Final Answer:

   visibility: hidden; -> Option A

4. Quick Check:

   Property: value; is correct CSS syntax [OK]

Hint: Use colon, not equals, for CSS properties [OK]

Common Mistakes:

• Using equals sign instead of colon
• Swapping property and value order
• Using non-existent CSS properties

3. Consider this HTML and CSS:

<div style="visibility: hidden; background: red; width: 100px; height: 100px;">Box</div>

What will you see on the webpage?

medium

A. A transparent box with the text 'Box' visible.

B. A red box with the text 'Box' visible.

C. No space or box visible at all.

D. No red box or text, but space is reserved where the box would be.

Solution

1. Step 1: Analyze the visibility property effect

   The style visibility: hidden; hides the element but keeps its space on the page.

2. Step 2: Understand the visual output

   The red box and text are hidden, so nothing is visible, but the space of 100x100 pixels remains empty.

3. Final Answer:

   No red box or text, but space is reserved where the box would be. -> Option D

4. Quick Check:

   visibility: hidden hides content but keeps space [OK]

Hint: Hidden means invisible but space stays [OK]

Common Mistakes:

• Expecting the box to be visible
• Confusing with display:none which removes space
• Thinking text remains visible

4. You wrote this CSS but the element still shows on the page:

.hidden-box { visibility = hidden; }

What is the error?

medium

A. The syntax uses '=' instead of ':'.

B. The property name should be 'visible' not 'visibility'.

C. The class selector should start with '#', not '.'.

D. The value 'hidden' is invalid for visibility.

Solution

1. Step 1: Check CSS property syntax

   CSS uses a colon : to assign values, not an equals sign =.

2. Step 2: Identify the syntax error

   The code uses visibility = hidden; which is invalid syntax and ignored by browsers.

3. Final Answer:

   The syntax uses '=' instead of ':'. -> Option A

4. Quick Check:

   Use colon for CSS property assignment [OK]

Hint: CSS uses colon, not equals, for properties [OK]

Common Mistakes:

• Using '=' instead of ':' in CSS
• Confusing class selector '.' with id selector '#'
• Assuming 'hidden' is invalid value

5. You want to hide a button but keep the page layout stable so other elements don't move. Which CSS property and value should you use?

hard

A. display: none;

B. position: absolute; left: -9999px;

C. visibility: hidden;

D. opacity: 0;

Solution

1. Step 1: Understand layout impact of hiding methods

   display: none; removes element and space, opacity: 0; hides visually but keeps clickable, position: absolute; left: -9999px; moves element off screen.

2. Step 2: Choose method that hides but keeps space

   visibility: hidden; hides element but keeps its space, keeping layout stable.

3. Final Answer:

   visibility: hidden; -> Option C

4. Quick Check:

   visibility: hidden hides but keeps space [OK]

Hint: Use visibility hidden to keep space but hide element [OK]

Common Mistakes:

• Using display:none which removes space
• Using opacity:0 but element remains interactive
• Moving element off screen breaks accessibility