How can I show an item of a breadcrumbs with a different color than the rest of the items

Question

I have this css and html of a breadcrumb but I don't want the hover state. Instead, I want to be able to show one item in the <li> with a different color than the rest. I try to put a different class with a different background and I failed.

Anyone knows how to do it?

Thanks!!

body{
  font-family:Arial, Helvetica, sans-serif;
    
  }
    #crumbs ul li a {
 display: block;
 float: left;
 height: 15px;
 background: #999;
 text-align: center;
 padding: 20px 30px 0 20px;
 position: relative;
 margin: 0 10px 0 0; 
 font-size: 18px;
 text-decoration: none;
 color: #fff;
    line-height: 1px;
 cursor:default;
}

    #crumbs ul li a:after {
 content: "";  
 position: absolute; right: -17px; top: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #999; 
    z-index: 1;
}
    #crumbs ul li a:before {
 content: "";  
 border-top: 17px solid transparent;
 border-bottom: 17px solid transparent;
 border-left: 17px solid #fff;
 position: absolute; left: 0; top: 0;
}
    
    #crumbs ul li {
    display:inline;
}

    #crumbs ul li a:hover {
 background: #779519;
}
 #crumbs ul li a:hover:after {
  border-left-color: #779519;
 }    
 
        
    #crumbs ul li:first-child a {
 border-top-left: 10px; border-bottom-left: 10px;
}
#crumbs ul li:first-child a:before {
 display: none; 
}

#crumbs ul li:last-child a {
 padding-right: 80px;
 border-top-right: 10px; border-bottom-right: 10px;
}
#crumbs ul li:last-child a:after {
 display: none; 
}

<div id="crumbs">
 <ul>
  <li><a href="#">Tipo de Bilhete / Zona</a></li>
  <li><a href="#">Sector</a></li>
  <li><a href="#">Lugar</a></li>


 </ul>
</div>

Answer 1

I've simply changed the :hover part into color allowing you to add class="color" to one of the <li>'s

body {
  font-family: Arial, Helvetica, sans-serif;
}
#crumbs ul li a {
  display: block;
  float: left;
  height: 15px;
  background: #999;
  text-align: center;
  padding: 20px 30px 0 20px;
  position: relative;
  margin: 0 10px 0 0;
  font-size: 18px;
  text-decoration: none;
  color: #fff;
  line-height: 1px;
  cursor: default;
}
#crumbs ul li a:after {
  content: "";
  position: absolute;
  right: -17px;
  top: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 17px solid #999;
  z-index: 1;
}
#crumbs ul li a:before {
  content: "";
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 17px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
}
#crumbs ul li {
  display: inline;
}
#crumbs ul li a.color {
  background: #779519;
}
#crumbs ul li a.color:after {
  border-left-color: #779519;
}
#crumbs ul li:first-child a {
  border-top-left: 10px;
  border-bottom-left: 10px;
}
#crumbs ul li:first-child a:before {
  display: none;
}
#crumbs ul li:last-child a {
  padding-right: 80px;
  border-top-right: 10px;
  border-bottom-right: 10px;
}
#crumbs ul li:last-child a:after {
  display: none;
}

<div id="crumbs">
  <ul>
    <li><a href="#">Tipo de Bilhete / Zona</a>
    </li>
    <li><a href="#" class="color">Sector</a>
    </li>
    <li><a href="#">Lugar</a>
    </li>
  </ul>
</div>

Answer 2

As mentioned above, the simplest way is to add a class to your element.

So essentially, CSS

#crumbs ul li a.DifferentColor { color:#whatever }

And then implement it with your new class name. HTML

<li><a href="#" class="DifferentColor">Sector</a></li>

Apologies for the repetitiveness, beaten to it earlier!