Css pseudo-classes without any selector, is it ok?

Question

Selector like

.some-class :first-child

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

But mobile Chrome's 'Reduce data option' removes a space between .some-class and :first-child and breaks the CSS by applying styles to .some-class element itself. In other cases like .class1 .class2 Chrome keeps the space intact. Probably, it considers the space between .some-class and :first-child to be a non-semantic space, because it thinks that there can't be a pseudo-class without some kind of a selector.

But I've checked the standard and it doesn't say anywhere that pseudo-class must have a selector. At the same time all examples with pseudo-classes include an element selector, like

p:first-child

So I'm confused. Is this CSS selector incorrect or is there a bug in Chrome's 'Reduce data usage'?

Answer 1

:first-child is valid as a standalone selector and this appears to be a bug in the mobile version of Chrome. We can confirm this with W3C's CSS Validator.

:first-child { background: #F00; }

Congratulations! No Error Found.

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

Answer 2

I would guess it's a bug. You should be able to work around it with .some-class *:first-child