Display 1 from X Divs selected by CSS-Class

Question

I have, on a homepage, X html div elements with X different classnames:

• class="home-1"
• class="home-2"
• class="home-3"
• class="home-4"
• etc.

My goal is, to dislpay only one of these "divs". The rest should be hidden with css. I think, i can't do this, only with css.

what i manually can do is

.home-1 { display: none; }
.home-3 { display: none; }
.home-4 { display: none; }

So in this Case home-2 is displayed.

Of course i want that automated with javascript, can someone please help me?

that yould be very nice!

UPDATE: i think i was already too tired when i wrote this question, because i forgot something important. aaarggh ;(!!

i want to use javascript to make sure that a "different" div is always displayed and the others are automatically hidden.

Answer 1

Yes, Its possible by CSS .
If you want to hide all elements which has class name start from home- and to a specific element then add .active class that used display:block property. Something like below snippet.

 /* Hide all .home-* elements */ [class^="home-"] { display: none; } /* Show element which has .active class*/ [class^="home-"].active{ display: block; }

 <div class="home-1">Home 1</div> <div class="home-2 active">Home 2</div> <div class="home-3">Home 3</div> <div class="home-4">Home 4</div>