¿Qué significan los dos puntos dobles (: :) en CSS?

¿Qué significan los dos puntos dobles ( ::) en CSS?

Por ejemplo:

input[type=text]::-ms-clear { display: none; }

Significa selector de pseudoelementos . Significa que el elemento de la derecha no existe en el DOM normal, pero se puede seleccionar.

Un pseudo-elemento está formado por dos dos puntos (: :) seguidos del nombre del pseudo-elemento.

Fuente

Originalmente era sólo una única colon, pero se cambió para diferenciarlo de clases seudo (como :hover, :first-child, :notetc). Es mejor usar :para beforey afterpseudo elementos, ya que los dos puntos únicos tienen mejor compatibilidad con el navegador, es decir, en versiones anteriores de IE.

El ::operador indica que está seleccionando un pseudoelemento , uno que en realidad no existe como elemento, pero que aún se puede apuntar para diseñar.

Un ejemplo de esto incluye varias implementaciones específicas del proveedor, como la -ms-clearmuestra que proporciona, la mayoría de los navegadores también tienen pseudo elementos para diseñar barras de desplazamiento y otros elementos nativos de la interfaz de usuario, pero también hay muchos pseudo elementos predefinidos a los que se puede hacer referencia por razones prácticas, como first-liney first-letter.

Las :beforey :afterlos pseudo elementos, incluso le permiten insertar contenido real en la página usando CSS con la contentregla.

CSS3 cambia la forma en que se seleccionan los pseudo-elementos, ya que el W3C quería distinguir las pseudo-clases como a:visitedde los pseudo-elementos como p::first-line. Consulte Selectores CSS avanzados .