Css pseudo-classes without any selector, is this normal?

Question

Type selector

.some-class :first-child 

which selects the first child inside .some-class , works as expected in all browsers, even in IE8.

But the mobile Chrome “Reduce Data .some-class ” removes the gap between .some-class and :first-child and breaks the CSS by applying styles to the .some-class element .some-class . In other cases, for example .class1 .class2 Chrome keeps the space intact. He probably thinks that the space between .some-class and :first-child not a semantic space, because it believes that there cannot be a pseudo .some-class without any selector.

But I checked the standard, and it does not say anywhere that the pseudo-class should have a selector. At the same time, all examples with pseudo-classes include an element selector, for example

 p:first-child 

So I'm confused. Is this CSS selector incorrect or is there a Chrome error “Reducing data usage”?

Answer 1

:first-child valid as a separate selector, and this seems like a bug in the mobile version of Chrome. We can confirm this with the W3C CSS Validator .

 :first-child { background: #F00; } 

Congratulations! No errors found.

In fact, everything listed in the Selectors section of the Level 3 Selection Specification is valid as a standalone selector. I suppose the examples for :first-child also include an element selector to avoid confusion and show how this can be used for this particular element.

Answer 2

I would guess that this is a mistake. You should be able to get around it with .some-class *: first-child