How SCSS rule evaluation done by browser

Question

I am working on a project where i am using an internal UI Library. In one of the CSS file, i saw something which looks strange. To simplify things, I am reciprocating with basic html elements and corresponding css:

CSS:

div{
  border:1px solid black;
  width:100px;
  height:100px;
}
.parent
//some comment exists here
.child{
  background-color: red;
}
.anotherdiv{
  background-color: blue;  
}

and HTML :

<div class='parent same'>Parent
    <div class='child'>Child</div>
</div>
<div class='anotherdiv'></div>

When i tried to check above thing on firefox, i got below warning under CSS console.

Dangling combinator: Ruleset ignored due to bad selector

I tried to approach the problem backwards, i.e. for the given CSS:

.parent
//some comment exists here
.child{
    background-color:red;
}

I thought above will resolve either to

.parent .child{
  background-color:red;          //applied on inside level element
}

or,

.parent.child{
  background-color:red;         //applied on same element
}

But either of them is not applied.

And, ruleset defined for div with class anotherdiv is working perfectly fine. I want to know how browser reads CSS, and upon reaching some crooked line, how it resolves and how following rulesets in the CSS gets effected.

UPDATE

I cross checked the type of file and it came out as .SCSS and below is what i found strange

.accordion-toggle 
 // Inner needs the styles because you can't animate properly with any styles on the element
 .accordion-inner {
      padding: 9px 15px;
      border-top: 1px solid #e5e5e5;
  }

Sorry for the previous misunderstanding!

Answer 1

Assuming the "comment" you speak of literally begins with // in your source file, in which case it is not a proper CSS comment but simply garbage (as the forward slash is not part of a CSS identifier or any valid CSS selector syntax), this causes a parse error.

The following stream of characters:

.parent
//some comment exists here
.child{
    background-color:red;
}

Is treated as .parent, followed by garbage, followed by a declaration block denoted by curly braces. Everything up to and including the } is discarded and the parser resumes from that point, continuing as though this stream of characters it just ignored was never there. From section 4.1.7 of CSS2.1:

The selector (see also the section on selectors) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a declaration block. When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

Now, when the parser sees the following rule:

.anotherdiv{
  background-color: blue;  
}

It is able to read and apply this rule because as far as the parser is concerned, the previous rule was your div rule at the very beginning of your snippet.