How do I target unknown <div>s from the CSS - html

Question

how do you add :target {opacity: 1} onto the href"#pop{{user.user_id}}" below?
the user_id is unknown until the page generates
The for loop as follows;
{% for user in pull %}
Link: {{user.user_name}} {{ user.user_id }}
<div style="opacity:0" id="pop{{user.user_id}}">
{{ user.info }}
</div>
{% endfor %}
Which looks like this after its translated onto a web page from Django.
Link: tom 10
<div style="opacity:0" id="pop10">
this is my info
</div>
Link: ann 8
<div style="opacity:0" id="pop8">
i am an apple
</div>
Link: mike 3
<div style="opacity:0" id="pop3">
i like pears
</div>

Answer 1

if the styles for all of them are same then you can add a class in the loop for each div and anchor and then add style to these anchors and divs which have this added class. If you want different styles for these divs and anchors then you need to have the id's .Hope it helps
{% for user in pull %}
<a class="styled_class" href="#pop{{user.user_id}}">Link: {{user.user_name}} {{ user.user_id }}</a>
<div class="styled_div" style="opacity:0" id="pop{{user.user_id}}">
{{ user.info }}
</div>
{% endfor %}

Answer 2

Okay, after a lot of thinking i figured it out by myself, all you need to do is make a style tag in the same template which is encased in the same for loop to generate the individual unique css Ids pointing to each div
<style type="text/css">
{% for i in pull %}
#pop{{i.user_id}}:target {
opacity: 1;
z-index: 1;
}
#pop{{i.user_id}} {
width: 58.8em;
min-height: 10em;
background: none repeat scroll 0% 0% #FFA500;
top: 9em;
border-radius: 16px;
opacity: 0;
position: absolute;
z-index: -1;
transition: opacity 1s ease 0s, z-index 1s cubic-bezier(0, 1, 1, 0) 0s;
max-height: 34em;
padding: 1em;
margin-left: 1em;
}
#pop_close{{i.user_id}}:target {
opacity: 0;
z-index: -1;
}
{% endfor %}
</style>