css class no effect in jquery append statement

Question

I'm try to apply a css class in jquery append statement

another css file

#comments {
    border:none;
}
#comments div {
    border:1px #FFFFFF solid;
}
#comments div div {
    border:1px #FF0000 dotted;
}
.test {
    border:1px #FF0000 solid;
}

a javascript file, #comment is a div

success: function (data) {

        $("#comments").html("");
          $.each(data,function (node_index,node_value) {

            var created = timeConverter(node_value.created);

            $("#comments").append($("<div></div>",{"class": "ui-body ui-body-c comments_div","html":node_value.name + "@" + created +"<br><div>" + node_value.subject + "</div>"+ "<br><div class=test>" + node_value.comment_body_value + "</div>"}));

          });
          $("#comments").collapsibleset();

        }

But there is no effect for the class .test, anyone know what is the problem?

Answer 1

It looks like a problem with CSS order of precedence(specificity) where the rule #comments div overrides the rule .test

Try

#comments div.test {
    border:1px #FF0000 solid;
}

Answer 2

#comments div is overriding .test.

Try this:

.test {
    border:1px #FF0000 solid !important;
}