Флаги с изображением вместо ссылки [дубликат]

У меня есть два флага, определенных на моем сайте (false_negative_flag и false_negative_flag_passed). Каждый флаг имеет свой текст ссылки на флаг.

В представлениях у меня есть два дисплея. У меня есть ссылка на флаг в каждом из этих представлений, одна с первым флагом, другая со вторым. Текст ссылки отображается правильно на обоих дисплеях. Я хотел, чтобы вместо текста ссылки были изображения поэтому я добавил следующий css:

.flag-wrapper.{false_negative_flag} a.flag-action {
    background: url(http://.../files/failed.png) no-repeat center center;
    border:none;
    width: 18px;
    height: 18px;
    margin-left: 0px;
    float: left;
    color: transparent;
    text-indent:-9999em;
}
.flag-wrapper.{false_negative_flag} a.unflag-action {
    background: url(http://.../files/passed.png) no-repeat center center;
    border:none;
    width: 18px;
    height: 18px;
    margin-left: 0px;
    float: left;
    color: transparent;
    text-indent:-9999em;
}
.flag-wrapper.{false_negative_flag_passed} a.flag-action {
    background: url(http://.../files/passed.png) no-repeat center center;
    border:none;
    width: 18px;
    height: 18px;
    margin-left: 0px;
    float: left;
    color: transparent;
    text-indent:-9999em;
}
.flag-wrapper.{false_negative_flag_passed} a.unflag-action {
    background: url(http://.../files/warning.png) no-repeat center center;
    border:none;
    width: 18px;
    height: 18px;
    margin-left: 0px;
    float: left;
    color: transparent;
    text-indent:-9999em;
}

Я использую 3 разных изображения, но в своих представлениях я всегда вижу passed и warning (последние две записи css). Есть ли какая-либо ошибка в моем css?

ПРИМЕЧАНИЕ: Я использую дисплеи на панелях, не знаю, уместно ли это.

РЕДАКТИРОВАТЬ после первого ответа: Я получил css, который я использую, по ссылке в этом ответе. Я просто продублировал и во второй части добавил имя машины второго флага. Проблема в том, что теперь он игнорирует первые два блока css.

Спасибо!