How to apply a distinct css class to each value of a field with multiple values?

Question

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.

Answer 1

A simple approach would be to use CSS :nth-child() pseudo classes. Assuming some HTML output like:

    <div class="entity-reference-wrapper">
        <div class="entity-reference">
            [CONTENT]
        </div>
        <div class="entity-reference">
            [CONTENT]
        </div>
        <div class="entity-reference">
            [CONTENT]
        </div>
        <div class="entity-reference">
            [CONTENT]
        </div>
    </div><!--/.entity-reference-wrapper -->

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/