¿Qué significa el doble colon (:) en CSS?

¿Qué significa el doble colon ( :: 🙂 en CSS?

Por ejemplo:

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

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

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

Fuente

Originalmente era solo un solo punto, pero se cambió para diferenciarlo de pseudo clases (como :hover :first-child ,: :not etc). Lo mejor es usar : para pseudo elementos before y after , ya que el único punto tiene mejor soporte para el navegador, es decir, en versiones anteriores de IE.

El operador :: indica que está seleccionando un pseudo elemento , uno que en realidad no existe como un elemento pero que aún puede ser designado para el estilo.

Ejemplo de esto incluyen varias implementaciones específicas del proveedor, como la muestra -ms-clear que proporciona, la mayoría de los navegadores también tienen pseudoelementos para crear barras de desplazamiento y otros elementos UI nativos, pero también hay muchos pseudo-elementos predefinidos a los que se puede hacer referencia. por razones prácticas, como first-line y first-letter .

Los pseudoelementos :before y :after incluso le permiten insertar contenido real en la página usando CSS con la regla de content .

CSS3 cambia la forma en que se seleccionan los pseudo-elementos, ya que el W3C quería distinguir pseudo-clases como a:visited partir de pseudo-elementos como p::first-line . Vea los selectores CSS avanzados .