So a few days ago I added the following code to Geek for Him and obviously missed the nested comments portion. This is implemented on many other sites of mine, without Standard Theme of coarse and working fine.

Am I missing something?

Check out the link here - geekforhim dot com is the site

A comment is made, I comment (highlight works) someone comments below me and it's highlighted also.

Any help would be greatly appreciated.

.commentlist li.bypostauthor, li.comment-author-admin {
background-color: #E0E0E0 !important;

So I have figured out that fi I add a background to

#comments ul.children {
background:none repeat scroll 0 0 #FFFFFF;
margin:10px 0 0 25px;

it works, but its very ugly. Any cleaner ideas?

See image below on what seems to messed up

I have noticed that the comments themselves are one. What I mean by this is that 4 nested comments below one all equal one comment. This is not correctly coded in my mind and probably a bug fix? Any ideas or workarounds do let me know.


With the guidance below I was able to figure out what I was after.

Thanks to t31os!!

1 Answer 1


The background is transparent, so it just inherits the styling of the parent comment..

Style the comment class..

#comments li.comment { background-color: #fff /* Default styling */ }

Then do the more specific styling as you go down..

#comments li.odd { /* whatever */ } /* Style odd numbered comments */
#comments li.even { /* whatever */ } /* Style even numbered comments */
#comments li.bypostauthor { /* whatever */ } /* Style author comments */

The more specific rules go later, so you get a cascading effect with your styles..

NOTE: CSS selectors with IDs typically have precedance over those with classes (even if they come first), the more specific your CSS rule, the higher priority it has over others competiting to style a given element.


#comments li.comment { /* This rule will be given priority */ }
.someclass li.comment { }

If you're a Firefox user, Firebug helps understand what styling an element is inheriting and from what style(strongly urge you to give it a try if you use Firefox).

This is really more a question of how to use CSS to style nested elements with the selectors available than one specific to WordPress. That said, if you get stuck working out what rules to put where, post up your comment CSS so we can see how you're building and ordering your CSS rules(styles).

I hope my answer helps..

EDIT: To answer your question in the comments.

Try targetting the div that encases the comment and follows the containing <li> instead..

#comments li.comment .comment-container {}
#comments li.odd .comment-container {}

And so on... see if that helps... :)

  • Thanks for the quick response. While this works and allows the colors not to bleed, it still looks bad as the comments themeselves are 1 comment, not seperate - any ideas? Nov 18, 2010 at 16:54
  • Target the div elements inside the list element, just use the list to target the CSS styling.. i'll update my answer with an example..
    – t31os
    Nov 18, 2010 at 17:01
  • Tried that and still left the side of dark grey around the child comment. Nov 18, 2010 at 17:10
  • Well yes that will happen, the reply is nested within the comment it is in response to, whether you target the containing <li> or the <div> that follows, a comment being a child will naturally have that effect.. any chance you can provide an example/screenshot/image of how it should look? (so i know what you're aiming for)..
    – t31os
    Nov 18, 2010 at 21:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.