singlecolon

Singlecolon is an informal term used in discussions of CSS syntax to refer to the single-colon notation that prefixes pseudo-classes in selectors. It is not an official CSS term, but it appears in tutorials and discussions to contrast the traditional single-colon form with the newer double-colon form used for pseudo-elements.

In CSS selectors, the single colon precedes pseudo-classes such as :hover, :focus, and :nth-child(2). These provide dynamic or structural conditions that elements must meet to match a rule. Since the early CSS specifications, single-colon syntax has been the standard for pseudo-classes and remains necessary for many widely used selectors.

Since CSS3, a separate convention emerged for pseudo-elements, which are represented with double colons, as in ::before and ::after. The double-colon form was introduced to distinguish pseudo-elements from pseudo-classes, improving readability and reducing ambiguity. However, for backward compatibility, many browsers continue to support the older single-colon form for pseudo-elements such as :before and :after.

Best practices typically advise using the double-colon syntax for pseudo-elements and reserving the single-colon form for pseudo-classes. Some older or non-conformant environments may still rely on the single-colon form for pseudo-elements, so awareness of browser compatibility remains important in cross-browser development.

In summary, singlecolon refers to the single-colon usage associated with CSS pseudo-classes, contrasted with the double-colon notation now favored for pseudo-elements. See also colon punctuation, CSS pseudo-class, CSS pseudo-element, and browser compatibility notes.