Applying styles from CSS to newly appended elements

I add an element to a parent div dynamically.

$('.some_div').append("<li class="hi">hey!</li>")

In my CSS,

.hi {
  color: white;
}

However, since <li class="hi"> is dynamically added, it seems the styles defined in CSS are not applied to the element. So,

$('.some_div').append("<li class='hi'>hey!</li>")
$('li.hi').css({"color":"white"});

would actually do the trick, but it seems redundant to me as the style is already defined in CSS file. Is this the only way to do it?

Update:

$('.some_div').append('<li style="color:white" >hey!</li>')

The above will work, but since the style is already defined in a separate CSS file, it'd be still redundant. My question was if there is a way to avoid this redundancy.

in CSS,

.some_div > li {
  font-size: 20px;
  background-color: 30px;
  margin-right: 2px;
}

.hi {
  color: white;
}

All of this won't be applied when I add a new element via ($).append(), so I am asking if there is a way to apply the styles that are already defined in a stylesheet, without having to re-defining them in a css() function.