Установить цвет определенной пули в списке

Question

У меня есть этот CSS:

 .list-mark-3 li:before {
   font-family: 'Font Awesome 5 Free';
    content: '\f101';
    font-weight: 900;
    font-size: 12px;
    color: white !important;
}

и этот HTML:

<div class="col-sm-5">
    <ul class="list list-mark-3">
        <li>ABC</li>
        <li class="makeitwhite">DEF</li>
        <li>GHI</li>
    </ul>
</div>

, который производит что-то вроде этого:

Тем не менее, я хотел бы сделать маркировку и текст по этому вопросу для DEF белым.Только эта одна пуля.Я попытался установить белый цвет в классе "makeitwhite", встроенном стиле и т. Д. Ничего!

Есть предложения?

Answer 1

Может быть, что-то вроде этого:

.list-mark-3 li.makeitwhite
    {
        color:white;
    }

Answer 2

Вы можете использовать nth-child() для этого:

.list-mark-3 li:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f101';
    font-weight: 900;
    font-size: 12px;
    color: white !important;
}

.list-mark-3 li:nth-child(2) {
    color: white;
}

JS Fiddle

Чтобы сделать его белым на hover, добавьте это:li:nth-child(2):hover

Answer 3

Попробуйте встроенный CSS

<div class="col-sm-5">
    <ul class="list list-mark-3">
        <li>ABC</li>
        <li style="color: white;">DEF</li>
        <li>GHI</li>
    </ul>
</div>