Rendering of polymer element created using template repeat - polymer

Question

In the below code we are able to create 7 div tags dynamicaly, if we want to change the style of third div how to do it?
<template repeat="{{ item in items }}">
<div id="in">q{{item}}<t>{{user.question[item].time}}<t>{{user.question[item].score}} </div>
<br><br>
</template>
the project link in git hub :quiz element

Answer 1

You can do a quick hack
<template repeat="{{ item, i in items }}">
<div class="{{i}} question">q{{item}}<t>{{user.question[item].time}}<t> {{user.question[item].score}} </div>
<br><br>
</template>
And you can use the class name to access it.

Answer 2

You can use a contitional expression with the tokenList filter built in with polymer:
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
<polymer-element name="question-list">
<template>
<style>
.thirdQuestion {
border: 1px solid red;
}
</style>
<template repeat="{{ item, index in items }}">
<div class="{{ {thirdQuestion: index === 2} | tokenList }} question">
{{item}}
</div>
<br>
<br>
</template>
</template>
<script>
Polymer({
items: [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5",
"item 6",
"item 7"
]
});
</script>
</polymer-element>
<question-list></question-list>

Answer 3

You can do this easily with pseudo-selectors in CSS.
.question:nth-of-type(3){...}
Here is a live example.