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.

Answer 2

The CSS rule set or rule in your case is:

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

It consists of selector and declaration block. The selector points to the HTML element you want to style:

The selector consists of everything up to (but not including) the first left curly bracket*

Since for CSS comments we know following:

The /* */ comment syntax is used for both single and multi line comments. There is no other way to specify comments in external stylesheets*.

Than your selector is parsed as:

.parent //some comment exists here .child

Which is an invalid selector and it outputs the error.

As the selector is bad, than browser cannot evaluate a selector against element nodes and whole rule is ignored. Browser will never try to fix the CSS rule, because:

• it may make more damage to layout.
• the rule may be correct, but current browser does not recognize it

Note: Some bad selectors can break the CSS structure, so all the rules that come after will be ignored.

read more...