Style Font Awesome list every other bullet color

Question

I am trying to set every other color of a list using a Font Awesome icon as the bullet. However, instead of it styling every other bullet, it styles all the bullets. If you switch back and forth between (odd) and (even) :nth-child, you can see all the bullet colors changing when you run the script. Why does it do it this way? Is there a better way of going about this?

.fa-asterisk:before {
    content: "\f069";
    color: #77c4d3;
    vertical-align: middle;
    line-height: 1.6em;
}

.fa-asterisk:nth-child(even):before {
  color: #7d8a2e;
  }

ul.fa-ul {
  list-style: none;
  }

<ul class="fa-ul">
  <li><i class="fa-li fa fa-asterisk"></i>HGTV Living BIG Sky Realtor</li>
  <li><i class="fa-li fa fa-asterisk"></i>Member Bitterroot Valley Board of Realtors</li>
  <li><i class="fa-li fa fa-asterisk"></i>Montana Regional MLS</li>
  <li><i class="fa-li fa fa-asterisk"></i>National Association of Realtors</li>
  </ul>

score 4 · Accepted Answer · answered Dec 07 '16 at 17:52

You need to target the li elements with your odd/even selector, as .fa-asterisk is a child element and is only known to the DOM as the first child of each li.

.fa-asterisk:before {
    content: "\f069";
    color: #77c4d3;
    vertical-align: middle;
    line-height: 1.6em;
}

li:nth-child(even) .fa-asterisk:before {
  color: #7d8a2e;
  }

ul.fa-ul {
  list-style: none;
  }

<ul class="fa-ul">
  <li><i class="fa-li fa fa-asterisk"></i>HGTV Living BIG Sky Realtor</li>
  <li><i class="fa-li fa fa-asterisk"></i>Member Bitterroot Valley Board of Realtors</li>
  <li><i class="fa-li fa fa-asterisk"></i>Montana Regional MLS</li>
  <li><i class="fa-li fa fa-asterisk"></i>National Association of Realtors</li>
  </ul>

Nice solution! I had similar issue before and worked out this way. :) — Paul Z., Dec 07 '16 at 17:54

score 0 · Answer 2 · answered Dec 07 '16 at 17:54

the asterisk is always the first child of the li. You need to apply nth-child() to the li tag. see below

.fa-asterisk:before {
    content: "\f069";
    color: #77c4d3;
    vertical-align: middle;
    line-height: 1.6em;
}

li:nth-child(even) .fa-asterisk:before {
  color: #7d8a2e;
  }

ul.fa-ul {
  list-style: none;
  }

<ul class="fa-ul">
  <li><i class="fa-li fa fa-asterisk"></i>HGTV Living BIG Sky Realtor</li>
  <li><i class="fa-li fa fa-asterisk"></i>Member Bitterroot Valley Board of Realtors</li>
  <li><i class="fa-li fa fa-asterisk"></i>Montana Regional MLS</li>
  <li><i class="fa-li fa fa-asterisk"></i>National Association of Realtors</li>
  </ul>

Yup - Looks like we were typing at exactly the same time. – mcgraphix Dec 07 '16 at 17:55 — mcgraphix, Dec 07 '16 at 17:55

Style Font Awesome list every other bullet color

2 Answers2