Question

This is how the code looks:

And I want to a border for the highlighted element, i.e. <div class="Comment">...</div>, how do I style it using CSS?

NOTE: Notice the class named ‘Comment’? It is used in both the highlighted element and it’s parent element. So, that’s probably why this one’s a bit tricky?

I tried the CSS codes below, and some others, and none worked.

.DataList .Item .comment, .DataList .Comment .comment,
.DataList .FirstComment .comment, .DataList .Mine .comment {
    border:1px solid #666;
    padding:10px;
    border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
}

.DataList .Item div.comment, .DataList .Comment div.comment,
.DataList .FirstComment div.comment, .DataList .Mine div.comment {
    border:1px solid #666;
    padding:10px;
    border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
}

What am I doing wrong? Hope someone can help me solve this small riddle. Thanks.

Answer 1

first, try NOT styling with extreme specificity (adding parent/element selectors). this way, you can just use .Comment – note that they ARE case sensitive.

if styles are overridden or you have selectors of the same name but different “context” (like you have a list item with .Comment and it’s child with div with .Comment), that’s when you use higher specificity (adding the parent/element in the selector) like div.Comment, .Item .Comment