CSS: Select first-child in ACTUAL SCOPE - css

Question

I would like to know how to select first-child in actual scope, let me give you an example so you could understand my question correctly:
HTML:
<div class="comment commentCompany">
<div class="commentTop"></div>
<div class="commentMiddle">
Text of comment level two comment.
<div class="comment">
<div class="commentTop"></div>
<div class="commentMiddle">
Text of comment level three.
</div>
<div class="commentBottom"></div>
</div>
</div>
<div class="commentBottom"></div>
</div>
CSS that first came to my mind to affect classes commentTop, commentMiddle, commentBottom inside the commentCompany class but only in a direct scope was this:
.commentCompany .commentTop:first-child{/*affect company's .commentTop*/}
.commentCompany .commentMiddle:first-child{/*affect company's .commentMiddle*/}
.commentCompany .commentBottom:first-child{/*affect company's .commentBottom*/}
But there are two problems: :first-child is more like first class's element's type(not really a first-child of class) (would have to use nth-child), and the main problem : it affects also the nested comment - which is not company's comment - so how to get only the direct scope of commentCompany?
I would like to know CSS2 && CSS3 solution if there is any difference. Thanks! :)

Answer 1

You want the child combinator >, not the :first-child or :nth-child() pseudo-classes:
.commentCompany > .commentTop
.commentCompany > .commentMiddle
.commentCompany > .commentBottom
This only selects .commentTop, .commentMiddle and .commentBottom that are directly nested within .commentCompany (within your so-called "actual scope"). See this answer for an illustration.
Using the space, the descendant combinator, means you're trying to get every first child of its parent that is nested within .commentCompany. Combine that with your class selectors and you get all kinds of unexpected results.
The child combinator is part of CSS2; there is no CSS3-only solution.