Un pseudoselector no válido equivale a un selector completamente ignorado

Quizás conozcas esto: si alguna parte de un selector no es válida, invalida todo el selector. Por ejemplo:

div, span::butt {  background: red;}

Aunque dives un selector perfectamente válido, span:buttno lo es, por lo que todo el selector queda invalidado: ni los divs ni span::buttlos elementos de la página tendrán un fondo rojo.

Normalmente eso no es un problema terriblemente grande. Incluso puede resultar útil, dependiendo de la situación. Pero hay muchas situaciones en las que ha sido un poco doloroso :butt.

Aquí tienes un clásico:

::selection {  background: lightblue;}

Durante mucho tiempo, Firefox no entendió ese selector y requirió un prefijo de proveedor ( ::-moz-selection) para obtener el mismo efecto. (Este ya no es el caso en Firefox 62+, pero ya lo entiendes).

En otras palabras, esto no fue posible:

/* would break for everyone */::selection, ::-moz-selection {  background: lightblue;}

Eso sería un problema para los navegadores que entendieron ::selectiony un problema para Firefox que solo entendió ::-moz-selection. Se convirtió en territorio propio para un preprocesador @mixin, eso es seguro.

Aquí hay otra sorpresa.

/* For navigation with submenus */ul.submenu {  display: none;}ul.menu li:hover ul.submenu,ul.menu li:focus ul.submenu,ul.menu li:focus-within ul.submenu {  display: block;}/* Oh no! We've broken all menu functionality in IE 11,    because it doesn't know what `:focus-within` is so it   throws out the entire selector */

Este comportamiento es lo suficientemente molesto como para que los navegadores aparentemente lo hayan solucionado en el futuro. En una conversación con Estelle Weyl, supe que esto está cambiando. Ella escribió en los documentos de MDN:

Generalmente, si hay un pseudoelemento o pseudoclase no válido dentro de una cadena o grupo de selectores, toda la lista de selectores no es válida. Si un pseudoelemento (pero no una pseudoclase) tiene un -webkit-prefijo, a partir de Firefox 63, los navegadores Blink, Webkit y Gecko asumen que es válido, sin invalidar la lista de selección.

Esto no es para ningún selector; es específicamente para pseudoelementos. Es decir, dos puntos dobles ( ::).

Aquí tienes una prueba:

Yo lo llamaría un cambio positivo.