CODEWITHSUNDEEP
htmlcssfont-awesome
Trisha
Trisha

Reputation: 539

Style Font Awesome list every other bullet color

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>

Upvotes: 2

Views: 313

Answers (2)

mcgraphix
mcgraphix

Reputation: 2733

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>

Upvotes: 0

Jon Uleis
Jon Uleis

Reputation: 18649

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>

Upvotes: 4

Related Questions