Apply CSS to All Elements Within a Named div

Question

I am using :target to hide divs from my page. which works great except the style is applied only to the first div on the page.

i am using this css

#mylist { display:block;}

#mylist:target { display:none;}

and i have a couple of elements with the same div

<a href="#mylist"> go </a>

<div id="mylist"> item 1 </div >
<div id="mylist"> item 2 </div >
<div id="mylist"> item 3 </div >

my problem is only the first Div gets hidden . how can i loop through all the elements ?

or is there an alternative way to achive this ？

Answer 1

An ID is and must be unique.It applies only to one element.Use classes

Try this:

<div class="mylist"> item 1 </div >
<div class="mylist"> item 2 </div >
<div class="mylist"> item 3 </div >


.mylist { display:block;}

.mylist:target { display:none;}

Answer 2

You want to hide elements using the target-property. This property is imo only usable on an anchorpoint. To define an element as anchorpoint you have to set an id. To hide multiple elements at once you have to declare the parent as anchorpoint from which you then can manipulate the child-elements.

See a working example here:

<div id="mylist">
 <div> item 1 </div>
 <div> item 2 </div>
 <div> item 3 </div>
</div>

http://jsfiddle.net/bLhv19cr/1/

Update Related to the comment below: http://jsfiddle.net/bLhv19cr/3/