Single or Double Colon for Pseudo-elements: Which Notation Should I Use?

Single or Double Colon Notation for Pseudo-Elements: Clarifying the Dilemma

Regarding the use of the single or double colon notation for pseudo-elements, it's crucial to consider browser compatibility. Since IE7 and IE8 do not support double-colon notation, should one solely use single-colon notation? Or should both notations be included to cater to older browsers?

The Answer: Proceed with Caution

Using both notations separated by a comma (e.g., .foo:after, .foo::after) is not recommended. According to CSS 2.1 specifications, any error in a selector will cause the entire rule to be disregarded. This means a CSS 2.1 compliant browser (not CSS3 capable) will ignore the entire rule if both notations are used.

A Viable Alternative

If compatibility with older browsers remains a concern, one can opt for a slightly different approach:

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

While this method ensures compatibility with browsers supporting both notations, it adds unnecessary verbosity.

Current Recommendation

For current projects, it's prudent to adhere solely to the single-colon notation (::) for pseudo-elements. This is because most modern browsers already support this notation for backwards compatibility. As IE8's market share continues to decline, the need to address legacy browsers will diminish over time.

The above is the detailed content of Single or Double Colon for Pseudo-elements: Which Notation Should I Use?. For more information, please follow other related articles on the PHP Chinese website!