Was bedeutet der Doppelpunkt (: :) in CSS?

Was bedeutet der Doppelpunkt ( ::) in CSS?

Beispielsweise:

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

Es bedeutet Pseudoelement- Selektor. Dies bedeutet, dass das Element rechts im normalen DOM nicht vorhanden ist, aber ausgewählt werden kann.

Ein Pseudoelement besteht aus zwei Doppelpunkten (: :), gefolgt vom Namen des Pseudoelements.

Quelle

Es war ursprünglich nur ein einziger Doppelpunkt, aber geändert wurde es von unterscheiden Klassen pseudo (wie :hover, :first-child, :notusw.). Es ist am besten, :für beforeund afterPseudo-Elemente zu verwenden, da der einzelne Doppelpunkt eine bessere Browserunterstützung bietet, und zwar in früheren IE-Versionen.

Der ::Operator gibt an, dass Sie ein Pseudoelement auswählen , das nicht als Element vorhanden ist, aber dennoch für das Styling ausgewählt werden kann.

Beispiele hierfür sind mehrere herstellerspezifische Implementierungen, wie das von -ms-clearIhnen bereitgestellte Beispiel. Die meisten Browser verfügen auch über Pseudoelemente zum Gestalten von Bildlaufleisten und anderen nativen UI-Elementen. Es gibt jedoch auch viele vordefinierte Pseudoelemente, auf die aus praktischen Gründen verwiesen werden kann. wie first-lineund first-letter.

Mit den Elementen :beforeund :afterPseudo können Sie sogar mithilfe der contentRegel mithilfe von CSS tatsächlichen Inhalt in die Seite einfügen .

CSS3 ändert die Art und Weise, wie Pseudoelemente ausgewählt werden, da der W3C Pseudoklassen wie a:visitedvon Pseudoelementen wie unterscheiden wollte p::first-line. Siehe Erweiterte CSS-Selektoren .