Utilize CSS to showcase one span individually on the screen

Question

On my HTML page, I have two span tags that display identical content but are nested in a div with different class names:

<div class='class1'>
  <span class='test-icon'>1</span>
</div>

<div class='class2'>
  <span class='test-icon'>2</span>
</div>

Is there a way to show only one <span> at a time based on the nested class? For example, I've attempted using

div.class1 span.test-icon {display: none}

, but it hides both spans.

Answer 1

Answer №1

Make sure to close your span tags properly!

Check it out below:

.class1  .test-icon{
  display: none;
 }

/*.class2  .test-icon{
  display: none;
 }*/

<div class='class1'>
<span class='test-icon'>Hola</span>
</div>

<div class='class2'>
<span class='test-icon'>Adios</span>
</div>

Answer 2

Make sure to close your span tags properly!

Check it out below:

.class1  .test-icon{
  display: none;
 }

/*.class2  .test-icon{
  display: none;
 }*/

<div class='class1'>
<span class='test-icon'>Hola</span>
</div>

<div class='class2'>
<span class='test-icon'>Adios</span>
</div>

Answer 3

Here is the solution that appears to be effective:

div.class1 span.test-icon {display:none;}

<div class='class1'>
<span class='test-icon'>Span 1</span>
</div>

<div class='class2'>
<span class='test-icon'>Span 2</span>
</div>

Answer 4

Here is the solution that appears to be effective:

div.class1 span.test-icon {display:none;}

<div class='class1'>
<span class='test-icon'>Span 1</span>
</div>

<div class='class2'>
<span class='test-icon'>Span 2</span>
</div>