3

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.

6
  • I forgot what cardinality is, can u refresh my memory?
    – No Sssweat
    Sep 17, 2015 at 10:58
  • 4
    The number of values you can have per-field @NoSssweat
    – Clive
    Sep 17, 2015 at 10:59
  • Could you use pseudo classes like :nth-child() - developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
    – bloke_zero
    Sep 17, 2015 at 11:17
  • @bloke_zero A friend on twitter has just suggested a similar approach. Perhaps you want to post this as an answer Sep 17, 2015 at 11:39
  • @MrPaulDriver, what is being styled? I ask because If it is <option> in a <select> it is hard to style the options (browser chrome sets most of that), but if it's <li> elements or divs it's pretty straightforward.
    – bloke_zero
    Sep 17, 2015 at 14:44

1 Answer 1

3

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/

2
  • I am afraid this might wont work, since I think all the multiple values get displayed as 1 field.
    – No Sssweat
    Sep 18, 2015 at 7:01
  • @No Sssweat I thought the same, but it tested okay. Sep 19, 2015 at 7:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.