UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2711.0 Safari/537.36

Example URL:
http://codepen.io/hjing/pen/xVjvwB

Steps to reproduce the problem:
1. Hover over the div that says "Hover here!"

What is the expected behavior?
The grandchild's background color turns green

What went wrong?
The grandchild's background color remains pink

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes chrome 49

Does this work in other browsers? No Firefox 45.0.2

Chrome version: 52.0.2711.0  Channel: canary
OS Version: OS X 10.11.4
Flash Version: Shockwave Flash 21.0 r0

The `.child:before` pseudo element with the comma is important:

```
.child:before,
.child {
  // ...
}
```

If you remove that line, the grandchild turns green as expected. Also, if you separate into two css blocks:

```
.child:before {
  // ...
}
.child {
  // ...
}

```

the grandchild also turns green as expected. See this codepen: http://codepen.io/hjing/pen/KzePBK for the full code snippet.

The grandchild turns green in Safari Version 9.1 (11601.5.17.1). It also turned green in chrome 49. It started remaining pink after upgrading to chrome 50.