Highlight Author Comments issues

Question

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;
padding:0;
}

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.

UPDATED

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

Thanks to t31os!!

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.

Eg.

#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... :)