Commentlist: bypostauthor problem with children list

Question

I have a rather annoying problem with my commentlist. After trying out a lot and playing around with the CSS stylesheet I don't think this is a CSS problem anymore which is why I decided to post here and ask, because I really have no clue what's wrong.

So, I want to "highlight" author comments. I'm using "li.bypostauthor" in the CSS stylesheet to do so. So far so good, it works! But only for the first depth layer!! Not for any of the children! There, suddenly all comments have the "author-only" style!

Like I said I already tried to fix it with CSS but it got a really long code snippet and in the end still didn't work.

Now, I was wondering if "bypostauthor" won't work for nested comments? Is there any other solution?

Please have a look at this comment list. There you can clearly see the problem (please ignore the messed-up design right now). If I also should post code snippets of my comment.php or function.php please let me know!

Edit: I don't seem to be the only one who has that problem, but it hasn't been solved yet, it seems.

Edit2: After some more hours of working on it I thought I finally got it to work, but I was wrong. It still doesn't work. Now it seems that children replies who are replies to the admin's comment get the same styling as the admin/author, but others don't. I'm really going crazy here and hope somebody could help me out here, thanks a lot!

Thanks a lot in advance!

Answer 1

Read the comments in your linked forum post on wordpress.com. It's just CSS. You are styling the elements based on the li.bypostauthor list element. Therefore every other element which is a child of this one will also receive these stylings. The ul.children list is inside the parent li list element. Look at your sourcecode, there you have your answer:

<li class="bypostauthor">
    <a href="#">SUB-COMMENT</a>
    <ul class="children">
        <li><a href="#">SUB-SUB-COMMENT #1</a></li>
        <li><a href="#">SUB-SUB-COMMENT #2</a></li>
    </ul>
</li>

You could change this behavior with > in your CSS or overwrite the styling for all children inside the .bypostauthor list element. E.g.

CSS

li.bypostauthor a {
    color: red;
}

li.bypostauthor li a {
    color: blue;
}

Or with >:

li.bypostauthor > a {
    color: red;
}

As described by gwideman in the forum:

1. xxx yyy { } means select any yyy somewhere within an xxx.
2. xxx > yyy { } means select a yyy which is an immediate child of an xxx.

Answer 2

The correct css to style only the comments by the author, with threaded comments, without highlinght also the children comments of author's comment:

.commentlist li.bypostauthor > div.comment-content div.comment-entry {
    background: #FFB;
}

Answer 3

I finally got how to do it and this helped me to understand it immediately, so I'm posting this so that other users with the same problem can understand what to do more clearly, too (hopefully):

li.comment-author-yourname{/*own style*/}
li.comment-author-yourname ul li{/*others' styles*/}
li.comment-author-yourname ul li.comment-author-yourname{/*your styles*/}

You can continue that until whichever depths of threaded comment you need. Just be warned that the CSS code for that will get extremely long, but it works! :)

Apparently this is something Wordpress still should fix to have a more elegant solution in the future.