CODEWITHSUNDEEP
htmlcss
Ibrahim
Ibrahim

Reputation: 11

Apply CSS to All Elements Within a Named div

I am using :targetto 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 ？

Upvotes: 1

Views: 174

Answers (2)

Fuzzyma
Fuzzyma

Reputation: 8474

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/

Upvotes: 1

stranger4js
stranger4js

Reputation: 267

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;}

Upvotes: 1

Related Questions