Multiple checkbox with multiple color in polymer 2

Question

I have multiple check-box and want to check it with multiple color. To do this I have override paper-checkbox but all elements are getting overriding. My scripts:

<custom-style>
  <style is="custom-style">
    paper-checkbox {
      --paper-checkbox-checked-color: #0F0;
    }
  </style>
</custom-style>

<div class="item-check">
    <paper-checkbox>Item 1</paper-checkbox>
    <paper-checkbox>Item 2</paper-checkbox>
</div>

I want to set red color for item 1 and green for item 2. What should I do? I'm new in polymer.

Answer 1

For every other item to have a different colour you could use:

<custom-style>
  <style is="custom-style">
    paper-checkbox:nth-of-type(2n+1) {
      --paper-checkbox-checked-color: #F00;
    }
    paper-checkbox:nth-of-type(2n+0) {
      --paper-checkbox-checked-color: #0F0;
    }
  </style>
</custom-style>

<div class="item-check">
    <paper-checkbox>Item 1</paper-checkbox>
    <paper-checkbox>Item 2</paper-checkbox>
</div>

If you want a specific colour for a specific checkbox, you can use classes and ids just like you normally would.