How to apply a distinct css class to each value of a field with multiple values? In a similar manner to views-row classes, is it possible to add a distinct css class to each value of a field where cardinality is greater than one?

Ideally I am looking for a module that does this.
A simple approach would be to use CSS :nth-child() pseudo classes.  Assuming some HTML output like:

    &lt;div class="entity-reference-wrapper"&gt;
        &lt;div class="entity-reference"&gt;
            [CONTENT]
        &lt;/div&gt;
        &lt;div class="entity-reference"&gt;
            [CONTENT]
        &lt;/div&gt;
        &lt;div class="entity-reference"&gt;
            [CONTENT]
        &lt;/div&gt;
        &lt;div class="entity-reference"&gt;
            [CONTENT]
        &lt;/div&gt;
    &lt;/div&gt;&lt;!--/.entity-reference-wrapper --&gt;


You can target the 2nd div with css like this:

    .entity-reference-wrapper .entity-reference:nth-child(2) {
        color: green;
    }


Odd children like this:

    .entity-reference-wrapper .entity-reference:nth-child(odd) {
        color: green;
    }


There are a lot more options over at CSS tricks here:  https://css-tricks.com/useful-nth-child-recipies/