What do two colons mean in CSS?

css Two colons represent pseudo elements, such as "::selection". The content controlled by the pseudo element is the same as the content controlled by an element, but the pseudo element does not exist in the document tree and is not a real element. That's why it's called a pseudo element.

The operating environment of this article: windows10 system, css3, thinkpad t480 computer.

Recommended: "css Video Tutorial"

css Two colons (::) represent pseudo-elements, such as "::selection". The content controlled by a pseudo element is the same as the content controlled by an element, but the pseudo element does not exist in the document tree and is not a real element, so it is called a pseudo element.

Different from pseudo-classes that target elements in a special state, pseudo-elements operate on specific content in the elements. The level they operate is deeper than that of pseudo-classes, so its dynamics are Pseudo-classes are much lower.

In fact, the purpose of designing pseudo-elements is to select the first letter (letter) and first line of element content, and select the front or back of certain content, which is something that ordinary selectors cannot do.

The content it controls is actually the same as the element, but it is only an abstraction based on the element and does not exist in the document, so it is called a pseudo element.

Extension:

There is a description in the W3C specification about CSS3 selectors:

　A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

　This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.

A simple translation, the general idea is that pseudo-elements consist of double colons and pseudo-element names. The double colon was introduced in the current specification to distinguish pseudo-classes from pseudo-elements. However, pseudo-classes are compatible with existing styles, and browsers need to support old pseudo-classes at the same time, such as :first-line, :first-letter, :before, :after, etc.

That is to say, for the pseudo-elements that existed before CSS2, such as :before, the single colon and the double colon::before have the same effect.

So, if your website only needs to be compatible with webkit, firefox, opera and other browsers, it is recommended to use double colon writing method for pseudo elements. If it has to be compatible with IE browser, it is better to use CSS2 single colon writing method. Safety.

The above is the detailed content of What do two colons mean in CSS?. For more information, please follow other related articles on the PHP Chinese website!