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.
Drupal Answers is a question and answer site for Drupal developers and administrators. It only takes a minute to sign up.
Sign up to join this communityA 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/
:nth-child()
- developer.mozilla.org/en-US/docs/Web/CSS/:nth-child<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.